1

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:

enter image description here

Joao Alves Marrucho
  • 819
  • 9
  • 30

1 Answers1

2

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>
tao
  • 82,996
  • 16
  • 114
  • 150
Alicia Sykes
  • 5,997
  • 7
  • 36
  • 64
  • 1
    Apparently, Chrome currently only allows `autoplay` of `muted` videos (see [this answer](https://stackoverflow.com/questions/50607588/chrome-video-autoplay)), so I added it to make it work. You might want to specify it clearly in your answer, as I'm expecting others to stumble on this in the future. Cheers! – tao Apr 26 '22 at 13:10