Javascript HTML5 play() 在 ios9 Safari 中不起作用?

Posted

技术标签:

【中文标题】Javascript HTML5 play() 在 ios9 Safari 中不起作用?【英文标题】:Javascript HTML5 play() not working in ios9 Safari? 【发布时间】:2016-01-21 05:33:18 【问题描述】:

我有一个基本的 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() 也没有任何反应。我必须启用控件并使用提供的播放按钮进行播放。如果我暂停视频,然后按我自己的播放按钮,它将起作用。我希望能够使用我自己设计的控件。

有谁知道为什么现在这样做?

【问题讨论】:

经历同样的事情。奇怪的是,如果使用Safari并在主屏幕上添加相同的页面,则视频将播放。 span> 【参考方案1】:

下面的代码工作如下;

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>

【讨论】:

以上是关于Javascript HTML5 play() 在 ios9 Safari 中不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

播放暂停 html5 视频 javascript

HTML5 视频缓冲,尽管等待 `canplaythrough` 事件到 `play()`

Android video.duration 直到 video.play() 才会加载

Android HTML5 视频 - 单击播放时有效,但 video.play() 无效

html5的audio,audio.play()在手机浏览器中不能自动播放

html5的audio,audio.play()在手机浏览器中不能自动播放