Geek Answers Handbook

Javascript HTML5 play () not working in Safari ios9?

I have a basic HTML5 player without such controls ...

<video id="videoPlayer" preload="auto" webkit-playsinline> <source id="videoSourceMP4" src="" type="video/mp4" /> <source id="videoSourceOGG" src="" type="video/ogg" /> </video>

At the top there is a button that, when pressed, loads the desired video:

 document.getElementById("videoSourceMP4").src = "videos/video.mp4"; document.getElementById("videoSourceOGG").src = "videos/video.ogg"; document.getElementById("videoPlayer").load();

Now I am also starting to check if the video can play and start playing using:

 document.getElementById("videoPlayer").oncanplaythrough = function(){ document.getElementById("videoPlayer").play(); }

This worked in ios8, however, nothing has happened since ios9. The video is stuck in the first frame and does not play. Even if I add another button at the top using the play () function, nothing will happen. I need to turn on the controls and play it using the play button. If I paused the video and then press my own play button, this will work. I want to be able to use my own controls.

Does anyone know why this is being done now?

+6
source share
1 answer

The code below works as follows:

  • iOS 9.2.1 - play video in full screen at the touch of a button
    • On-screen video plays inline
  • iOS 9.3 beta 1 - playing videos at the touch of a button
    • On-screen video plays inline

Video files from http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5

 <html> <head> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <style> video{ width:400px; border: 2px dashed black; } button{ font-size:2em; padding:1em; } </style> </head> <body onload='init()'> <video id="videoPlayer" preload="auto" webkit-playsinline> <source id="videoSourceMP4" src="" type="video/mp4" /> <source id="videoSourceOGG" src="" type="video/ogg" /> </video> <br/> <button type='button' onclick='go()'>Play</button> <script> function init(){ document.getElementById("videoPlayer").oncanplaythrough = function(){ document.getElementById("videoPlayer").play(); } } function go(){ document.getElementById("videoSourceMP4").src = "small.mp4"; document.getElementById("videoSourceOGG").src = "small.ogg"; document.getElementById("videoPlayer").load(); } </script> </body>

0
source

More articles:


All Articles