事件与属性

属性    描述

audioTracks    返回可用的音轨列表（MultipleTrackList对象）

autoplay    媒体加载后自动播放

buffered    返回缓冲部件的时间范围(TimeRanges对象)

controller    返回当前的媒体控制器（MediaController对象）

controls    显示播控控件

crossOrigin    CORS设置

currentSrc    返回当前媒体的URL

currentTime    当前播放的时间，单位秒

defaultMuted    缺省是否静音

defaultPlaybackRate    播控的缺省倍速

duration    返回媒体的播放总时长，单位秒

ended    返回当前播放是否结束标志

error    返回当前播放的错误状态

initialTime    返回初始播放的位置

loop    是否循环播放

mediaGroup    当前音视频所属媒体组 (用来链接多个音视频标签)

muted    是否静音

networkState    返回当前网络状态

paused    是否暂停

playbackRate    播放的倍速

played    当前播放部件已经播放的时间范围(TimeRanges对象)

preload    页面加载时是否同时加载音视频

readyState    返回当前的准备状态

seekable    返回当前可跳转部件的时间范围(TimeRanges对象)

seeking    返回用户是否做了跳转操作

src    当前音视频源的URL

startOffsetTime    返回当前的时间偏移(Date对象)

textTracks    返回可用的文本轨迹(TextTrackList对象)

videoTracks    返回可用的视频轨迹(VideoTrackList对象)

volume    音量值

属性

事件    描述

abort    当音视频加载被异常终止时产生该事件

canplay    当浏览器可以开始播放该音视频时产生该事件

canplaythrough    当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件

durationchange    当媒体的总时长改变时产生该事件

emptied    当前播放列表为空时产生该事件

ended    当前播放列表结束时产生该事件

error    当加载媒体发生错误时产生该事件

loadeddata    当加载媒体数据时产生该事件

loadedmetadata    当收到总时长，分辨率和字轨等metadata时产生该事件

loadstart    当开始查找媒体数据时产生该事件

pause    当媒体暂停时产生该事件

play    当媒体播放时产生该事件

playing    当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件

progress    当获取到媒体数据时产生该事件

ratechange    当播放倍数改变时产生该事件

seeked    当用户完成跳转时产生该事件

seeking    当用户正执行跳转时操作的时候产生该事件

stalled    当试图获取媒体数据，但数据还不可用时产生该事件

suspend    当获取不到数据时产生该事件

timeupdate    当前播放位置发生改变时产生该事件

volumechange    当前音量发生改变时产生该事件

waiting    当视频因缓冲下一帧而停止时产生该事件

事件

转：https://blog.csdn.net/Take_Dream_as_Horse/article/details/53422397

video的暂停、播放事件，并切换清晰度

（1）暂停的时候显示广告图片（图片有跳转链接）

（2）切换清晰度后，视频按切换前播放时间继续自动播放（或者暂停播放）

注:最好在没个video标签外定义一个div盒子，这样便于定位广告图片的位置或者自定义的操作按钮的位置

同时说明一下 video常用属性：controls:是否显示控制按钮 autoplay：是否加载完成自动播放

html

<span style="color:#ff0000;">   </span><div class="video">

        <video id="media"  controls="controls"   width="" height="">

            <source src="video/video.mp4" type="video/mp4" />

            您的浏览器版本太低,请及时更新

        </video>

        <a href="http://www.baidu.com" target="_blank" class="skip"></a>

         <!-- 切换清晰度 -->

        <a class="toggle-btn">切换至240p</a>

    </div>

js

$('.skip').hide();

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

myVideo.addEventListener('play',function(){

    $('.skip').hide();

});

myVideo.addEventListener('pause',function(){

    $('.skip').show();

})  

////切换清晰度

      function toggleVideo(e){

        //当前播放时间

        var curTime=e.currentTime;

        $("#media").attr("src","video/exo.mp4").attr("autoplay","true");

        e.currentTime=curTime

      }  

      $('.toggle-btn').click(function(){

        toggleVideo(myVideo);

      })

注：这里有几点需要注意：

（1）myvideo是原生DOM对象，所以绑定事件为addEventListener()方法

（2）play为播放事件、pause为暂停事件

（3）curTime为切换清晰度时视频已经播放的时间

demo地址：https://github.com/chuanzaizai/h5-video-demo

低版本浏览器不支持的需另外处理

<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="mediaplayer" width="700" height="350"> 
　　<embed> 
　　　　<param name="SRC" value="Lavigne.mp4"> 
　　</embed> 
</object>

<body>

    <video id="media" src="什么叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">

        这里是注释文字，如果无法支持 HTML  浏览器将显示这里的文字。如果支持，就直接显示视频，忽略文字。

    </video>

</body>

</html>

通过上面的截图可以看到每个格式的视频，浏览器支持的各不一样，所以为了考虑 到兼容性我们需要使用不同格式的视频，这个时候就可以使用source标签来指定不同的 视频格式：

<video width="" height="" controls="controls">

 <source src="movie.ogg" type="video/ogg">

 <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

我们 知道video不兼容低版本的浏览器，所以为了兼容低版本的浏览器，我们还需要 使用flash的 播放方式：

 <video id="media" src="什么叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">

        <!-- 兼容 Firefox -->

        <source src="movie.ogg" type="video/ogg" />

        <!-- 兼容 Safari/Chrome-->

        <source src="什么叫跨域.mp4" type="video/mp4" />

        <!-- 如果浏览器不支持video标签，则使用flash -->

        <embed src=" movie.swf" type="application/x-shockwave-flash" width="" height="" allowscriptaccess="always" allowfullscreen="true">

        </embed>

    </video>

自己写的一个限制视频播放次数

<head>

    <meta charset="utf-8" />

    <title>视频播放次数</title>

    <script src="Scripts/jquery-1.10.2.min.js"></script>

    <script src="Js/Common.js"></script>

    <style type="text/css">

        .video {

            width: %;

            height: %;

            position:absolute;

            margin:5px auto;

        }

    </style>

</head>

<body>

    <div class="video">

        <video id="videoyoudai" controls="controls" class="video">

            <!--<source src="" type="video/mp4" />-->

            Your browser does not support the video tag.

        </video>

    </div>

</body>

</html>

<script type="text/javascript">

    //var webapiUrl = "http://地址:8081/api/";

    //function GetQueryString(name) {

    //    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    //    var r = window.location.search.substr(1).match(reg);

    //    if (r != null) return unescape(r[2]); return null;

    //}

    $(function () {

        var contractCode = GetQueryString("contractCode");

        if (contractCode == null || contractCode=="") {

            alert("合同编号不能为空;");

        }

        var data = { contractCode: contractCode };

        $.ajax({

            type: "get",

            url: webapiUrl + "/controller/action",

            data: data,

            success: function (data) {

                if (data.ErrCode == ) {

                    var contractInfo = data.Data;

                    if (null == contractInfo) {

                        alert("视频不存在;");

                        return;

                    }

                    var num = contractInfo.PlayNum + ;

                    if (num > ) {

                        alert("最多只能播放3次;");

                        return;

                    }

                    else {

                        alert("可以播放3次，第" + num + "次播放;");

                        $("#videoyoudai").prop("src", contractInfo.VideoUrl);

                    }

                    var yvideo = document.getElementById("videoyoudai");

                    yvideo.addEventListener("play", function () { PlayNum(num) });

                    console.log(contractInfo.VideoUrl);

                }

                else {

                    alert(data.ResultMsg);

                }

            },

            error: function (json) {

                var data = eval(json);

                if (data != "") {

                    alert(data.ResultMsg);

                }

                else {

                    alert("服务器错误");

                }

            }

        })

        function PlayNum(num) {

            var sessionStore = window.sessionStorage.getItem(contractCode);

            if (sessionStore == null) {

                window.sessionStorage.setItem(contractCode, contractCode);

                var data = { type: "youdai", Name: "优贷", Code: contractCode, playNum: num };

                $.ajax({

                    type: "post",

                    url: webapiUrl + "/LoanVideoPlay/AddOrUpdateLoanVideoPlay",

                    data: data,

                    success: function (data) {

                        if (data.ErrCode == ) {

                        }

                        else {

                            alert(data.ResultMsg);

                        }

                    },

                    error: function (json) {

                        var data = eval(json);

                        if (data != "") {

                            alert(data.ResultMsg);

                        }

                        else {

                            alert("服务器错误");

                        }

                    }

                })

            }

        }

    });

</script>

Video标签事件与属性的更多相关文章

  1. 【HTML5 video】video标签的部分属性解析

    转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...

  2. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  3. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  4. video 标签在微信浏览器的问题解决方法

    最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题: 在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设 ...

  5. <video>标签的特性

    以前的网页视频 过去还没有HTML5的时候,我们处理网页视频的时候,都是通过Flash插件来实现的,然而,并非所有浏览器都有同样的插件. 现在有了HTML5带来的video元素,开发者能够很方便地将视 ...

  6. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  7. video标签 在微信浏览器打开，不弹出大的独立窗口 而是直接播放。

    1.在 video 标签中添加   属性    x5-playsinline  playsinline  webkit-playsinline="true" 2.ckplayer的 ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  9. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

随机推荐

  1. JDK、JRE、JVM三者关系

    一.JDK.JRE.JVM三者的关系 JDK包含了JRE和JVM,JRE包含了JVM,其中JRE中没有javac 附一张官网的详细图: 二.RIA RIA(富客户端):能完成浏览器无法完成的功能,它是 ...

  2. kali linux之webshell

    webacoo(web backdoor cookie) 类终端的shell 编码通信内容通过cookie头传输,隐蔽性较强 cm:base64编码的命令 cn:服务器用于返回数据的cookie头的名 ...

  3. Axios 使用说明

    get请求: on_sum: function () { axios.get('http://127.0.0.1:8000/test/' ).then(response=>{ alert('ok ...

  4. 关于jboss的线程问题+java.lang.outofmemoryError

    近日来,用Jmeter做压力测试.发现,每台客户机使用800个线程组压力倍增.昨天的测试,到了今天下午都没有跑完. 仔细观察了下Jboss的错误日志,发现,jboss已经宕机了. 本身后台的环境是使用 ...

  5. C#基于SQLiteHelper类似SqlHelper类实现存取Sqlite数据库的方法

    本文实例讲述了C#基于SQLiteHelper类似SqlHelper类实现存取Sqlite数据库的方法.分享给大家供大家参考.具体如下: 这个类不是我实现的,英文原文地址为http://www.egg ...

  6. Httprequest 添加Cookie

    string postData = "Inputs={\"BarCode\":\"" + barCode + "\"}" ...

  7. PHP批量给目录下所有的文件转换编码

    代码如下: function tree(&$arr_file, $directory, $dir_name=''){            $mydir = dir($directory);  ...

  8. paraview plot over line

  9. js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XXX函数代码

    最近看不少在线工具里面都有一些编码转换的代码,很多情况下我们都用得到,这里脚本之家小编就跟大家分享一下这些资料 Unicode介绍 Unicode(统一码.万国码.单一码)是一种在计算机上使用的字符编 ...

  10. Apache Shiro(六)-基于URL配置权限

    数据库 先准备数据库啦. DROP DATABASE IF EXISTS shiro; CREATE DATABASE shiro DEFAULT CHARACTER SET utf8; USE sh ...