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. SDUT 3399 数据结构实验之排序二:交换排序

    数据结构实验之排序二:交换排序 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 冒泡排序和快 ...

  2. 20169206 2016-2017-2 《网络攻防实践》 nmap的使用

    Part I 使用nmap扫描ubuntu靶机 先给出nmap的官方中文操作手册https://nmap.org/man/zh/,其实并不太好用,而且有时候会打不开,但至少是官方手册. 探查操作系统 ...

  3. 1506-122 (S) Expecting pointer to struct or union.

    __你们 大胆 猜 是什么错.. __ 很尴尬的错误..就是 结构体指针. ___只有结构体 指针 可以用 ->   这个符号哦.. 所以 你只要 将  ->  改成   .    , 就 ...

  4. Json数据导出生成Excel

    最近在做一个导入导出Excel的功能,导出其他类型的文件都比较熟悉,但是导入跟导出一个Excel还是稍微特殊点.根据这次的经验,写了个导出的小样例. 总体思路就是json数据的key,value跟Ex ...

  5. 【Arcgis for android】spatialite打开shapefile

    互联网(free and share) 本文参考下面的博文: http://blog.csdn.net/arcgis_all/article/details/8232976 Preparation: ...

  6. windows下部署icescrum

    软件151  卢炜杰 一.安装JDK 1.下载JDK 地址:http://www.oracle.com/technetwork/java/javaee/downloads/index.html 选择相 ...

  7. 从零开始搭建.NET Core 2.0 API(学习笔记一)

    从零开始搭建.NET Core 2.0 API(学习笔记一) 一. VS 2017 新建一个项目 选择ASP.NET Core Web应用程序,再选择Web API,选择ASP.NET Core 2. ...

  8. Linux配置国内的Yum源

    因为Linux默认的yum源是国外的源,所以会有卡顿,缓慢的情况.而国内的Yum源相对速度较快,现在也比较成熟,所以给Linux更换国内Yum源是一个很好的选择. 1.  备份(备份之前需要yum i ...

  9. angular知识点总结

    angularjs angular支持的运算 逻辑运算 比较运算 三目运算 调用字符串对象的成员方法 使用直接变量表示法创建对象 使用数组 (不可以)new var (不可以)调用全局es javas ...

  10. Python学习过程(一)

    Hi,最近得知了有这么一种计算机语言,名字叫Python,下面对自己从零开始学习的一个记录.被大家所熟知的语言有很多种,比如说C语言 .java .C++  .C#等,以及javascri和火的一塌糊 ...