0
429
ViewsHow to play iframe video using JavaScript (not youtube)?
How can I play an video element inside an iframe. The iframe is automatically creating the video element and controls. There are many answers here pointing to add &autoplay to the src address but this is not a youtube iframe.
My HTML code:
<button @click="playVideo(item.name)">play</button>
<iframe :ref="item.name" autoplay :src="item.video_link" :title='item.name'></iframe>
JS
playVideo(itemName) {
this.$refs[itemName] <--- this give me the iframe DOM element I want to play
},
Rendered HTML:
ยท
Juan Pablo Isaza
1 answers
Answer question0
Since you have the source MP4, you should be using <video> instead of an iframe. You'll then have full access to autoplay, controls and other features.
Based on your code, this would look something like:
<video :ref="item.name" autoplay :title='item.name'>
<source :src="item.video_link" type="video/mp4">
</video>
And since IPFS can be a bit slow for first load, you can also specify poster to show a thumbnail while the content is loading. Here's an example using an IPFS source:
<h3>IPFS Embeded Video Demo</h3>
<!-- ๐ required for autoplay in Chrome -->
<video autoplay muted autopictureinpicture controls poster="https://i.stack.imgur.com/O9qG3.jpg?s=256&g=1" height="200">
<source src="https://ipfs.io/ipfs/QmbGtJg23skhvFmu9mJiePVByhfzu5rwo74MEkVDYAmF5T" type="video/webm">
</video>
ยท
Juan Pablo Isaza
Report
Answer question