详细讲解Video的基本使用方法

2020年12月31日23:40:10 娱乐 1170

Video的基本使用方法

详细讲解Video的基本使用方法 - 天天要闻

1)<video src="url">您的浏览器不支持video标签,请使用google浏览器浏览</video>

2)加入要添加预加载图片,添加属性poster="图片URL"

<video poster="图片的url">

<source src="视频URL"></source>

您的浏览器不支持video标签,请使用google浏览器浏览

</video>

注意:视频的格式不同,支持的浏览不同

常见的视频格式:ogg(ogv)/MPEG4(mp4)/WEBM(webm)

加入非要在不支持的浏览器上看效果,那么你得准备swf格式的视频

<video width="800" height="">

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

<source src="myvideo.ogv" type="video/ogg"></source>

<source src="myvideo.webm" type="video/webm"></source>

<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">

<param name="movie" value="myvideo.swf" />

<param name="flashvars" value="autostart=true&file=myvideo.swf" />

</object>

当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>

</video>

2、常见固有属性

autoPlay(加载完成自动播放)

controls(使用的时浏览器默认的控件)

loop(循环播放)

width(video的宽度)

height(video的高度)

src(视频的地址)

video.currentTime(当前视频的播放事件)

video.duration(视频播放的总时长)

3、常见的事件(方法)

video.play()---播放视频

video.pause()---暂停视频播放

4、全屏设置:(注意设置全屏的时候,element的选取,不要加到video上面,否则全屏时会出现默认的控件,也有可能导致视频全屏时不可以看到画面,这里注意element一般时所有控制器与video标签最近的共同的父元素)

全屏:element.webkitRequestFullScreen();

element.mozRequestFullScreen();

element.requestFullScreen();

取消全屏:document.webkitCancelFullScreen();

document.mozCancelFullScreen();

document.cancelFullScreen();

5、设置音量

video.volume 取值范围为0-1

如果使用input[type='range']时,可以设置range的min=0,max=10,在onchange事件时取得range的值除以10表示音量大小

eg:video.volume = $("input[type='range']").val()/10;

注:如果需要设置静音模式,直接将音量设置为0

video.volume = 0;

6、播放进度

video.currentTime的改变是通过video的timeupdate事件而改变,所以在设置的时候,我们需要在值改变的时候,添加事件video.addEventListener("timeupdate",playTime,true);

eg1:

$("#playRange").on("change",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

eg2:

$("#playRange").on("mousedown",function(){

vdo.removeEventListener("timeupdate",playTime,true);

$(this).on("mouseup",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

})

playTime方法用来设置显示播放的事件,并且当前播放的进度和range匹配

function playTime(){

var nowTime = parseInt(vdo.currentTime);

$("#playRange").val(nowTime);

$(".playTime").html(nowTime+"/"+allTime);

}

娱乐分类资讯推荐

潘雨辰:与侯勇离婚后,和女儿相依为命,46岁不碰感情孤身一人 - 天天要闻

潘雨辰:与侯勇离婚后,和女儿相依为命,46岁不碰感情孤身一人

当“老夫少妻”的婚恋模式被世俗反复咀嚼时,一段相差11岁的婚姻却在两年内轰然倒塌。她因崇拜嫁给“叔圈顶流”,却在破碎婚姻后活成“冻龄单亲妈妈”。潘雨辰与侯勇的故事,撕开了娱乐圈“年龄差爱情”的浪漫滤镜。有人执着于对抗中年焦虑,有人则在与女儿
原创音乐剧《向阳而生》将亮相“上海之春”国际音乐节 - 天天要闻

原创音乐剧《向阳而生》将亮相“上海之春”国际音乐节

一场以音符为魂、以信仰为炬的艺术盛宴——原创音乐剧《向阳而生》将于4月8日至9日在梅赛德斯奔驰文化中心上演。该剧由上海电影艺术职业学院师生共同编创,以音乐叙事致敬革命历史,生动再现《义勇军进行曲》诞生的峥嵘岁月,为观众献上一场跨越历史的艺术盛宴。《向阳而生》剧照 采访对象供图(下同)《义勇军进行曲》唱响...
广州交响乐团登台“上海之春”,奏响《追光》 - 天天要闻

广州交响乐团登台“上海之春”,奏响《追光》

作为第40届上海之春国际音乐节(以下简称“上海之春”)参演节目,广州交响乐团(以下简称广交)在音乐总监黄屹的执棒下,4月5日于上海交响音乐厅举办专场音乐会。广交与上海歌剧院合唱团合作,奏响由青年作曲家龚天鹏以《国际歌》为灵感与素材创作的交响曲《追光》。为庆祝中华人民共和国成立75周年,广州交响乐团委约青年...
33岁演员李现,被生态环境部点名! - 天天要闻

33岁演员李现,被生态环境部点名!

日前当红演员李现因为热爱“打鸟”(摄影爱好者对拍摄鸟类的俗称)被@生态环境部 点名全国各地文旅部门闻风而动,纷纷在官方社交媒体平台上“喊话”李现,邀请他来自己的城市“打鸟”。据悉,在古装剧《国色芳华》里,李现饰演的 “花鸟使”蒋长扬,身负为皇家搜罗奇花异鸟之责。而在现实生活中,李现尤钟情于鸟类摄影。此...
“首发”“首趟”之后,第二班车为何难见踪影? - 天天要闻

“首发”“首趟”之后,第二班车为何难见踪影?

在企业老板洪英杰脑中,上海、杭州、宣城、南京四座城市,能连成一个无比清晰的四边形。上海与宣城也是他两家工厂的所在。多年来,他总沿着四边形往返两地——不是途经杭州,就是途经南京。2024年12月,呼啸声中,横向穿越长三角大地的沪苏湖高铁通车,沿线最大新建站上海松江站启用。对洪英杰来说,上海与宣城之间,多了一...