HTML5里video的相关属性、方法及事件整理[附完整在线实例演示]原创 收藏

文章标签: 视频
  • :
  • 03-29 16:06
  • :
  • 75次
  • :
  • 0条
  • 0赞

简介本文整理了HTML5里和video标签的相关方法,属性及事件,通过本文你可以快速的掌握HTML5里VIDEO标签的使用,并且有完整的在线实例演示,让你更直观的了解video的各种方法和事件。

站长最近做的一个WEB项目里,需要显示相关的视频,这就用到了HTML5里的video标签,站长在查找和学习其相关的事件,属性时,需要在网上找多篇文章一起看,才能“看全”,十分的不方便,站长就在这里总结整理一下,同时也是一个学习的过程。

一:HTML5里VIDEO标签的使用示例:

<video id="video" src="视频地址" controls width="200px" heigt="100px"></video>

通常,我们对视频的要求不高的话,直接像上面这样来引入视频就行了。

二:video标签的相关属性:

    src :视频的地址
    poster :视频封面图片,值为图片的路径
    autoplay :autoplay="autoplay" ,视频在就绪后马上播放
    preload :预加载,值为:auto/meta/none ,但如果加了autoplay后,此属性不起作用
        auto : 默认值,当页面加载后载入整个视频
        metadata : 当页面加载后只载入元数据
        none : 当页面加载后不载入视频
    loop: loop="loop" 循环播放
    controls :controls="controls" 显示播放器的控件,
    width : 设置视频的宽度
    height: 设置视频的高度

三:video的相关方法:

请往下看,站长会给出完整的在线实例演示的!

通过:var video=$("#video")[0]; 来获取到我们web里的video对象:

video.paused : 获取视频当前是否处理暂停状态;
video.play() : 开始播放当前视频;
video.pause() : 暂停播放;
video.width : 设置或获取视频的宽度,
    设置:video.width=200;
    获取:var w=video.width;
    注意video.height=200; 这样设置后,改变的是“播放器”的高度,而不是视频的高度,并且var h=video.height也获取不到视频的高度,至少站长测试的时候,获取到的是0,大家可以看下面的在线演示。
video.preload : 修改/获取视频的preload状态:
    获取:var p=video.preload;
    设置:video.preload="metadata";
video.currentSrc  : 获取当前播放的视频的地址;
video.src="地址";     设置当前播放的视频地址;
video.load();        开始加载,通常和上面的设置src结合使用,可以用来动态修改视频的地址
video.networkState : 获取当前视频加载的状态:
    0.此元素未初始化
    1.正常,但没有开始加载数据,即准备就绪,随时都能开始播放的意思 
    2.正在下载数据
    3.没有找到资源
video.duration : 获取视频的总长度;
video.currentTime : 获取/设置当前播放的位置:
    获取:var t=video.currentTime;
    设置:前进五秒:video.currentTime=t+5; 
video.autoPlay : 获取/设置视频的autoplay状态:  
    获取:var a=video.autoPlay;
    设置:video.autoPlay="autoplay"; 
video.loop : 获取/设置视频循环播放的状态:
    获取:var l=video.loop;
    设置:video.loop="loop";
video.controls :显示/隐藏工具栏:
    video.controls=!video.controls;//这一句就能控制controls工具栏的显示或隐藏;
video.muted : 设置/获取是否静音:
    video.muted=!video.muted; //切换视频是否静音的状态
video.volume :获取/设置视频的音量,值的范围:0-1;

四:video的相关事件:

jquery里为video绑定事件的方法为:$("#videoID").on("事件",function(){ });

loadstart : 客户端开始请求数据 即打开页面,页面渲染完毕时;
progress  :  客户端正在下载加载视频数据 ,即视频开始加载“metadata”或播放时;
play  :    开始播放时;
pause  :  暂停时;
loadedmetadata : 加载完metadata时;
loadeddata :加载完视频时,也就是视频缓存完成时;
waiting : 等待时,视频没缓存完,快进时,或者播放完,准备回放,还没开始播放时就会发生这个事件;
playing : 快进后开始播放时,及回放时都会触发这个事件;
canplay : 不常用,可以播放,但中途可能因为加载而暂停,下面的在线演示里,可以自己动手查看;
ended  :播放结束时,如果设置成了循环播放,不触发这个事件;
volumechange :当音量改变时发生;
error : 当发生错误时;
stalled : 当网速失效时;
abort :客户端主动终止下载(不是因为错误引起);
seeking :当寻找时;
seeked :寻找完毕时;
ratechange :当播放速度改变时;

以上就是video里的所有事件了,当然,另外还有一些常用的事件,video也支持的,比如click(单击),dblclick(双击)等!

这里站长准备了完整的在线演示:HTML5里用jquery获取和设置相关属性的在线实例演示



您正在找的文章可能是: