Why didn’t my <video autoplay> element start playing on the iPhone until I tapped it? Even with JavaScript?

On my iPhone, I tried the following HTML and JavaScript:

<video id="myvideo" src="" width="352" height="288" autoplay></video>

<script>
开发者_运维问答var vdo = document.getElementById('myvideo');
vdo.src = 'http://server-address:9902/208AC328657F5332-live-1.m3u8';
vdo.play();
</script>

But the video element didn't start playing until I tappped it. Why?

Thanks, any help will be appreciated!

The autoplay attribute is ignored on iPhone. It's just a decision they made in their implementation, just like they did with controls (they display no matter what.)

You need to load video first...

<video id="myvideo" src="" width="352" height="288" autoplay></video>

<script>
var vdo = document.getElementById('myvideo');
vdo.src = 'http://server-address:9902/208AC328657F5332-live-1.m3u8';
vdo.load(); // video must be loaded
vdo.play(); // after success load it can be played
</script>

Did you literally put that JavaScript into your HTML, straight after the video tag?

I’m not sure if it would work anyway, but you need to have the JavaScript in <script> tags for it to be interpreted as JavaScript:

<video id="myvideo" src="" width="352" height="288" autoplay></video>

<script>
var vdo = document.getElementById('myvideo');
vdo.src = 'http://server-address:9902/208AC328657F5332-live-1.m3u8';
vdo.play();
</script>