詳細講解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%,百餘座位周周爆滿...