A simple HTML5 media player with custom controls and WebVTT captions. I’ve added vue-plyr to my little SPA to let it play audio files from a playlist of podcast episodes, and I have everything figured out and working except for one thing. The player is in a component that appears once on the page for each instance of the playlist. So with a playlist of 25 episodes, there are 25 instances of the component on the page. A Vue.js component that is a plyr video player. This is useful for when you want a nice video player in your Vue app. Installation yarn add vue-plyr-simple # or npm i vue-plyr-simple -save Browser. Include the script file, then register in the components section; e.g. Specify the id prefix for the icons used in the default controls (e.g. 'plyr-play' would be 'plyr'). This is to prevent clashes if you're using your own SVG sprite but with.
You’re browsing the documentation for v2.x and ealier. For v3.x, click here.
Computed Properties
In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example:
At this point, the template is no longer simple and declarative. Tune sweeper 4 22 25. You have to look at it for a second before realizing that it displays
message
in reverse. The problem is made worse when you want to include the reversed message in your template more than once.That’s why for any complex logic, you should use a computed property.
Vue Plyr App
Basic Example
Result:
Original message: '{{ message }}'
Computed reversed message: '{{ reversedMessage }}'
Here we have declared a computed property
reversedMessage
. The function we provided will be used as the getter function for the property vm.reversedMessage
:You can open the console and play with the example vm yourself. Itf 14 barcode generator. The value of
vm.reversedMessage
is always dependent on the value of vm.message
.You can, the setter will be invoked and
vm.firstName
and vm.lastName
will be updated accordingly.Watchers
While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the
watch
option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.For example:
Result:
In this case, using the
watch
option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer. None of that would be possible with a computed property.Vue Plyr Login
In addition to the
watch
option, you can also use the imperative vm.$watch API.Vue Plyr Wireless
← Template SyntaxClass and Style Bindings →
Plyr React
Caught a mistake or want to contribute to the documentation? Edit this on GitHub! Deployed on Netlify .