详细讲解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);

}

娱乐分类资讯推荐

不管你多节俭,这6类东西该扔就扔吧 - 天天要闻

不管你多节俭,这6类东西该扔就扔吧

过期药品与保健品:家中的小药箱往往是容易被忽视的地方,一些过期的药品和保健品不仅失去了原有的效用,还可能产生有害物质,误服将对健康造成严重威胁。大扫除时,务必检查并清理这些过期物品,确保家庭用药安全。
李晓旭:在《织造府》塑造从未有过的贾宝玉 - 天天要闻

李晓旭:在《织造府》塑造从未有过的贾宝玉

“上海观众以包容态度看待新编剧目,《织造府》演出现场的热烈感觉扑面而来。”4月11日、12日,南京市越剧团团长,梅花奖、白玉兰奖得主李晓旭携新剧《织造府》登陆上海东方艺术中心,她分饰曹雪芹、贾宝玉两角,带领一群年轻演员展示不一样的《红楼梦》故事。《织造府》作为毕派小生,李晓旭对上海充满感情,“我是毕春芳...
(文化中国行)传统曲艺混搭相声“圈粉”年轻人 - 天天要闻

(文化中国行)传统曲艺混搭相声“圈粉”年轻人

中新社合肥4月13日电 题:传统曲艺混搭相声“圈粉”年轻人 作者 傅天骋 黄梅戏遇上相声曲艺,历史人物“穿越”舞台,安徽方言化身“爆梗”——在安徽合肥一家相声馆里,每天都上演着传统曲艺与青春潮流的奇妙碰撞。剧场创始人薛培森透露,自推出“新派皖韵相声”以来,“95后”至“00后”观众占比突破80%,百余座位周周爆满...