logo标签列表

Javascript HTML5在iOS9 Safari中的play()无法正常工作？

javascripthtmlvideohtml5-videoios9
6

我有一个基本的HTML5视频播放器，没有控件，像这样...

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

一个按钮被放置在视频上方，当按下时会加载所需的视频：

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

我现在开始检查视频是否可以播放，如果可以，就应该开始播放，使用以下代码：
document.getElementById("videoPlayer").oncanplaythrough = function(){
document.getElementById("videoPlayer").play();
}

这在ios8中可以工作，但是自从ios9以来就没有任何反应了。视频停留在第一帧并且不播放。即使我添加另一个按钮并分配play()，也没有任何反应。我必须启用控件并使用提供的播放按钮播放。如果我暂停视频然后按下我的播放按钮，它将起作用。我想能够使用我自己设计的控件。

有人知道为什么现在会这样吗？

1
经历了同样的事情。奇怪的是，如果您使用Safari并将同一页面添加到主屏幕，则视频将播放。 - Mac
1个回答
0
以下代码的工作原理如下：
- iOS 9.2.1 - 当按钮被按下时，视频全屏播放 - 从主屏幕开始，视频内联播放
- iOS 9.3 beta 1 - 当按钮被按下时，视频内联播放 - 从主屏幕开始，视频内联播放
视频文件来自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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接