Question

我在Android Webview上使用标签。这是代码：

<div class="video-wrapper">
    <video id="video" class="video-full-screen" preload="none" webkit-playsinline poster={poster url here}>
       <source id="mp4" src="{Video Source here}" type="video/mp4">
       <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

我注册了以下视频事件：

var video = $('video');

video.bind("canplay", function(){
    console.log("canplay");
});

video.bind("playing", function(){
    console.log("playing");
});

video.bind("waiting", function(){
    console.log("waiting");
});

video.bind("ended", function(){
    console.log("ended");
});

video.bind("canplay", function(){
    console.log("canplay");
});

当我在按下视频海报之前断开互联网连接时，我收到以下事件（点击海报后）：

＆＃34;等待＆＃34;

＆＃34; canplay＆＃34;

＆＃34;播放＆＃34;

＆＃34;截止＆＃34;

所有这些事件都在几秒钟内发生（视频没有播放）。在三星Galaxy S4 4.2.2上测试。

这显然是某种包包吗？（未在iOS / Nexus 4，Android 4.4上发生）

Answer 1

这似乎是一个令人费解的事件链。在您的情况下，我认为重要的一步是尝试抓住“断开事件”作为错误。实际上，已结束的事件确实会触发但它应该与警告/错误事件一起发生。您可以尝试绑定错误事件，然后在发生错误时采取适当的操作，例如显示错误图像或尝试重新加载视频。

video.bind('error', function() {
console.log('error');
});

如果还不够，请尝试中止或停止的事件：

video.bind('abort', function() {
console.log('abort');
});
video.bind('stalled', function() {
console.log('stalled');
});

您可以阅读here了解该事件的说明。停滞的事件也被描述为here。

请记住，HTML5视频实施仍然依赖于浏览器/ webview制造商，某些设备不会按预期做出反应。

当没有互联网连接时，Html5视频触发“结束”事件

1 个答案: