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. 21、conda下载,安装,卸载

    参考:https://www.cnblogs.com/Datapotumas/p/6293309.html 1.下载 conda下载网址:https://conda.io/miniconda.html ...

  2. Effective Objective-C [下]

    http://esoftmobile.com/2013/08/17/effective-objective-c-2/ Chapter 6: Blocks and Grand Central Dispa ...

  3. Luogu 3302 [SDOI2013]森林

    BZOJ 3123 丑陋的常数,BZOJ 19968ms 卡过. 感觉几个思想都挺经典但是挺套路的. 先考虑不连边的情况怎么做,区间第$k$小,想到主席树,每一个结点维护它到根的前缀和,这样子每一次查 ...

  4. GTXE_COMMON

    http://forums.xilinx.com/xlnx/board/crawl_message?board.id=IMPBD&message.id=9657 If you are usin ...

  5. 《Maven实战》笔记-10-灵活的构建

    一.灵活构建的意义 一个优秀的构建系统必须足够灵活,它应该能够让项目在不同的环境下都能成功地构建.例如,典型的项目都会有开发环境.测试环境和产品环境,这些环境的数据库配置不尽相同,那么项目构建的时候就 ...

  6. 解决.jsp及静态资源文件访问404的问题

    我们在做Web项目时,经常将.jsp文件放到webapp\WEB-INF下,这时,我们访问jsp等文件的时候,就会报404. 如果是纯前后端分离的项目,后端只返回数据,不处理页面,也没问题.但,有时我 ...

  7. 适配器设计模式及GenericServlet(九)

    一共两个知识点:1.Servlet 里面已经有适配器了,名字叫:GenericServlet.      2.什么是适配器模式. 如果这个接口里面有好多方法,那创建A/B/C这个三个类的时候如果必须继 ...

  8. <a>实现按钮的javascript+jquery编程实例

    涉及知识点:怎样实现让注册的function获取当前<a>,以便通过它进行其他操作 风格一: 1.html端: <td class="text-center"&g ...

  9. ASP.NET MVC底层原理与框架

    前言 鄙人有一毛病,喜欢钻研原理性的东西,感觉只知道怎么用还不太够,更想知道如何实现的以及为什么会这样. 暑假的时候做积分系统是第一次接触MVC,感觉MVC就是一个框架,分为Module ,view和 ...

  10. 自定义等高 Cell

    1.介绍 1.1 代码自定义 cell(使用 frame) 创建一个继承自 UITableViewCell 的子类,比如 BookCell1. 在 initWithStyle:reuseIdentif ...