HTML Video标签属性

html页面代码

<video height="2160" id="playVideo" width="3840" poster="img/blank.png" autoplay="autoplay" preload="auto" >

获取video对象

var media = document.getElementById("playVideo");

不要使用jquery获取,这样会有问题

监听video对象的ended属性实现连续播放

      var curr = 0;
                            var media = document.getElementById("playVideo");
                            media.addEventListener("ended", function () {
                                media.src = videoArr[curr];
                                media.play();
                                curr++;

if (curr >= videoArr.length)
                                    curr = 0;
                            }, false);

更多的属性请参考 http://www.w3school.com.cn/jsref/dom_obj_event.asp

http://www.jianshu.com/p/404d01b8e713/

HTML5 video 连续播放视频的更多相关文章

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

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  2. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  3. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  4. 解决html5 video不能播放 能播放声音不能播放视频

    <video id="playVideo" style="width:90%; height:auto;" controls poster=". ...

  5. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  6. Video标签播放视频?谷歌浏览器?safari?? 谷歌浏览器播放不了mp4格式的视频的原因

    webm格式和mp4格式,判断了浏览器能否支持的视频类型后,给了一个if判断,如果是支持mp4格式,就返回视频后缀mp4,如果是webm,就返回后缀webm.结果,在谷歌浏览器中播放不了,为什么我指定 ...

  7. html5 video标签播放视频流

    从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...

  8. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  9. HTML5 Video与Audio 视频与音频

    ---- 视频Video对象 - 指定视频播放地址 <video width="320" height="240" controls="cont ...

随机推荐

  1. ZROI2018提高day5t1

    传送门 分析 我们不难将条件转换为前缀和的形式,即 pre[i]>=pre[i-1]*2,pre[i]>0,pre[k]=n. 所以我们用dp[i][j]表示考虑到第i个数且pre[i]= ...

  2. Blocks UVA - 10559

    传送门 题目大意 有n个带有颜色的方块,没消除一段长度为x的连续的相同颜色的方块可以得到x^2的分数,让你用一种最优的顺序消除所有方块使得得分最多. 分析 首先不难看出这是一个区间dp,于是我们考虑如 ...

  3. 1020C Elections

    传送门 题目大意 现在有 n个人,m个党派,第i个人开始想把票投给党派pi,而如果想让他改变他的想法需要花费ci元.你现在是党派1,问你最少花多少钱使得你的党派得票数大于其它任意党派. 分析 我们枚举 ...

  4. vue 之 箭头函数与对象的单体模式

    箭头函数 基本语法: ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需 ...

  5. SSH (Struts2+Spring3.0+Hibernate3)框架(二) 框架的配置

    一.准备工作: 1. JDK -> jdk1.6.0_17 安装(环境变量配置): JAVA_HOME = C:\ jdk1.6.0_17; PATH = %JAVA_HOME%\bin; %J ...

  6. 数据结构 elegant_sequence(优雅的序列)

    数据结构 elegant_sequence(优雅的序列) 问题描述 如果一个序列的元素的异或和等于 1,我们称这个序列为优雅的序列.现在给你一个 01 序列,和 m 次询问.对于每次询问,给出 l,r ...

  7. javax.servlet.ServletConfig接口(五)

    主要作用是保存web.xml文件里面的配置信息 一个servlet对应一个ServletConfig,100个servlet对应100个ServletConfig.   代码如下(单个获取和获取所有) ...

  8. mac port选择使用的python的版本

    To list: port select --list python To show: port select --show python To select: sudo port select -- ...

  9. windwos下安装nginx(转)

    1.windows下安装Nginx1.1 从nginx官网下载相应的安装包:http://nginx.org/  1.2 建议下载  下载稳定版 1.3 解压到相应的目录,比如我是e盘 然后修改目录名 ...

  10. 【bzoj2818】: Gcd 数论-欧拉函数

    [bzoj2818]: Gcd 考虑素数p<=n gcd(xp,yp)=p 当 gcd(x,y)=1 xp,yp<=n满足条件 p对答案的贡献: 预处理前缀和就好了 /* http://w ...