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

【问题标题】：Html5 video trigger "ended" event when no internet connection没有互联网连接时 Html5 视频触发“结束”事件
【发布时间】：2014-04-06 11:23:44
【问题描述】：

我在 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");
});

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

“等待”

“可以玩”

“玩”

“结束”

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

这明明是某种包？（在 iOS / Nexus 4、Android 4.4 上不会发生）

【问题讨论】：

标签： javascript android html webview html5-video

【解决方案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 制造商，并且某些设备不会按预期做出反应。

【讨论】：