html5中的video標簽和audio標簽詳解

src 音樂資源的路徑

創(chuàng)新互聯(lián)公司是一家專業(yè)提供灤州企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為灤州眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

autoplay 播放

controls　控制面板

loop 循環(huán)播放

muted 初始靜音

audio支持的音樂格式有mp3 ogg wav

audio src="../source/菊花爆滿山.mp3" autoplay="autoplay" controls="controls" loop="loop" muted="muted"你的瀏覽器太辣雞了，不支持audio標簽/audio

選擇不同的文件格式

source標簽為audio提供音樂資源，并且可以指定多種類型的音樂資源

audio autoplay="autoplay"

source src="../source/菊花爆滿山.mp3" type="audio/mp3"

audio autoplay="autoplay"

source src="../source/菊花爆滿山.mp3" type="audio/ogg"

/audio

video標簽支持的文件類型　mp4 ogg webm

width height 是設(shè)置播放界面大小的，通常情況下只會指定一方的值，然后等比縮放

poster,當視頻鏈接出現(xiàn)問題，或者網(wǎng)絡(luò)延遲加載慢時，顯示的一張占位圖片

video autoplay="autoplay" controls="controls" loop="loop" muted="muted" width="200" height="500" poster="../source/haha.jpg"

source src="../source/diqiu.mp4" type="video/mp4"

你的瀏覽器太拉基了，不支持video標簽

/video

video::-webkit-media-controls-enclosure {

display: none !important;

}

var??? myVideo=document.getElementById("video");

var??? btn=document.getElementById("button");

btn[0].click=function(){

myVideo.muted=true;(是否靜音：是)

}

btn[1].click=function(){

myVideo.muted=false;(是否靜音：否)

}

btn[2].click=function(){

myVideo.play();(播放)

}

btn[3].click=function(){

myVideo.pause();(停止播放)

}

btn[4].click=function(){

myVideo.webkitrequestFullscreen();(全屏顯示)

}

(1)、需要獲取視頻的總時長(duration)賦值給進度條的最大值，progress.max=video.duration;

(2)、需要獲取當前視頻播放的當前時間位置(currentTime)賦值給當前進度條的長度，progress.value=video.currentTime;

然后在視頻播放的同時，要保證進度條的值能夠及時獲取到視頻的時長和當前播放時間位置。

需要開一個定時器setInterval(pro，100);：就是說在1毫秒獲取一次視頻的數(shù)值賦值給progress進度條，這樣就能保證及時性。

這樣進度條就能和視頻的準確的同步了。

首先需要獲取到range的value值，賦給視頻的音量上去，才能控制視頻的音量大小，

input?? type="range"?? min="0"?? value="50"??? max="100"??? id="range"/

var ran=document.getElementById("range");

獲取range.value,

賦值給video的音頻屬性:video.volume=range.value/100;

這時候就能實現(xiàn)簡單拖動range而控制視頻的音量了。

然后還需要進去前面的聲音關(guān)閉判斷，兩則是獨立的事件，所以，需要在拖動事件中進行判斷是否是靜音muted，然后在進行muted設(shè)置為false。

添加視頻的html標簽是

最常用的向HTML中視頻添加的方法有兩種

一種是古老的object/object標簽

一種是html5中的video/video標簽

html5 video標簽的用法

HTML 5 video 標簽

定義和用法

video 標簽定義視頻，比如電影片段或其他視頻流。

提示和注釋

提示：可以在開始標簽和結(jié)束標簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。

屬性

實例

!--?一段簡單的?HTML5?視頻：--

video?src="movie.ogg"?controls="controls"您的瀏覽器不支持?video?標簽。/video

新聞標題：html5視頻標簽的簡單介紹
文章URL：http://chinadenli.net/article22/dsicdcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、定制開發(fā)、網(wǎng)站維護、網(wǎng)站設(shè)計公司、電子商務(wù)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)