html5 Video 跳过当前视频

在html5的video中,有时候加载视频会出现问题。

特别在手机端,我们需要去检测视频加载是否出现问题,如果出现问题要怎么解决。

在我目前的需求中,是需要跳过当前视频播放下一个。

我的大致的逻辑是

//依赖jquery

var player = $("#player"),
      playlist = [...],
      currentIndex = 0

player.on("ended", function(){
      ++currentIndex
      if(currentIndex < playlist.length - 1) {
            setSrc(playlist[currentindex])
      }
}).on("error", function(){
      //当出现问题的时候,怎么自动跳转呢
      player.trigger("ended")
})

当遇到问题的时候,直接触发ended事件,当做当前视频已经播放完毕。

这样就可以在出现错误的情况下自动跳过了。

时间: 2024-10-12 09:12:01

html5 Video 跳过当前视频的相关文章

Html5 Video 实现方案

来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. Html5 Video参考来源:http://www.xuanfengge.com/html5-video-play.html(这篇博文确实帮助很大) 1.1. 目的将Html5 Video功能应用到实际项目中,针对不同的平台和环境,进行个性化处理.基本只考虑webkit浏览器兼容问题 1.2. Ht

[HTML5] Video 标签播放及控制视频

Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4 .webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识 不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 0x1 在 Video 中嵌入视频 <video src="/movie.mp4" controls="controls"> 你就用这个浏览器有出息吗?

HTML5 video标签播放视频下载原理

HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 --> <source src="assets/dizzy.mp4" type="video/mp4"

(转)让所有浏览器支持HTML5 video视频标签

转自http://www.zhangxinxu.com/wordpress/?p=661 一.前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长FQ的人,到底如何我也不得而知. 与主题不相关的HTML5方面的东西我就不多说了,对于video标签,获取大家都听说了,这个标签的功能如同现在HTML语言中的img标签,就现在,比如要链接并显示一张图片,可以这样子: <img data-src="http://ima

HTML5 Video(视频)

HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari

18、HTML5 Video(视频)和 audio(音频)

video标签概述: <video> 元素提供了 播放.暂停和音量控件来控制视频. 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留.如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变. <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的. <vid

Android[安卓] 版Air Video 远程播放电脑视频

在苹果的iOS下面,有个应用Air Video,可以在iOS下通过Wifi远程直接播放电脑里的视频,而不需要把视频复制到手机上再看.非常好用!最近用了Android的手机,想找类似的应用,找了很久都没找到.仔细想了下AirVideo的工作原理,和优酷等视频网站类似,在Android下面应该也可以有类似的方法实现. 今日在华为荣耀6上面终于验证通过了一个完美的方案,赶紧放上来和有同样需要的朋友们分享分享. 先说一下Air Video的工作原理: 1) 在Windows下面安装Air Video S

HTML5视频播放器accessible html5 video player

accessible html5 video player 是一款开源的轻量级播放器,采用HTML5视频播放技术,支持字幕显示.视频自由跳播.重播等功能.该html5视频插件由paypal Accessibility 团队开发,兼容所有Firefox.chrome.以及ie10以上版本等浏览器.ie9仅支持内部视频调用. 简洁清新的视频播放界面可以让你在很短的时间内喜欢上它,至少我是真的被它的界面吸引到了,有一点遗憾的是无法全屏,如果有知道的朋友可以向大家分享! accessible html5

Android html5 video js设置currentTime不准确,解决办法。

早在flash时代 我们控制视频播放指定时间位置的画面也会有不准确的情况, 具体情况表现为:video.seek(time)   而实际画面会跳到此时间附近(1-2秒)的画面 而HTML5 我们通过 var vd=document.getElementById("DOM ID名"); vd.currentTime=10 ; 可以指定视频立即播放对应时间位置的画面 (电脑,IOS端均可) 但是andorid端真机上却发现几个问题 Q:设置 vd.currentTime=时间,但是却没有效