整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML多媒體 ， 主要分為Audio 音頻和 Video 視頻。
基本語法
src 指定當(dāng)前播放的音頻文件，controls播放控制器，loop歌曲循環(huán)，autoplay自動(dòng)播放 (chrome66之后被禁止)主流瀏覽器已經(jīng)關(guān)閉了自動(dòng)播放，需要js觸發(fā)才行，preload 預(yù)加載，如果使用了autoplay這個(gè)屬性preload就失效了。
<audio src="xxxx.mp3" controls="controls" loop="loop" autoplay="autoplay" > 您的瀏覽器不支持html5的audio標(biāo)簽 </audio>
Audio支持格式有：
Firefox：支持 Ogg Vorbis和WAV
Opera ：支持Ogg Vorbis和WAV
Safari ：支持MP3，AAC格式 ，和MP4
Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4
Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4
IOS ：支持MP3，AAC格式 ，和MP4
Android ：支持AAC和MP3
Audio 不光是一個(gè)HTML標(biāo)簽，它還是一個(gè)window對(duì)象。既然是對(duì)象，那就有方法和屬性。
對(duì)象的常用屬性和方法
audio.addEventListener("play",() => {});
audio.onplay = () => {}
Audio.js
以前的Audio瀏覽器是不能直接播放的，如果需要播放一個(gè)音頻需要借助一個(gè)flash插件。后來有了Audio.js的出現(xiàn)后，播放音頻不用依賴flash插件了。flash是使用as來編寫的，它和JavaScript有點(diǎn)相像，但是有一些門檻，在此基礎(chǔ)上，出現(xiàn)了很多的Audio插件，audio插件做了兩件事情，一件是舊版的瀏覽器兼容（http://kolber.github.io/audiojs/），第二件是美化自定義了瀏覽器的外觀。
// 加載audio.js
<script src="/audiojs/audio.min.js"></script>
// 靜態(tài)加載
<script>
audiojs.events.ready(function() {
const as = audiojs.createAll();
});
</script>
// 動(dòng)態(tài)加載
<audio style="display:none" src="./music.mp3" preload="auto" />
基本語法
src源，controls播放控制器，loop 循環(huán)播放，autoplay 自動(dòng)播放，height，width，寬度和高度，在Audio里面不能指定，但是在Video里面是可以的，muted 靜音，poster 預(yù)覽圖（當(dāng)視頻沒有播放或者正在加載時(shí)展示給用戶的一張圖片，為了交互的友好性），preload 預(yù)加載，和autoplay一塊時(shí)失效。
<video src="xxxx.mp4" controls="controls" loop="loop" autoplay="autoplay" > 您的瀏覽器不支持html5的video標(biāo)簽 </video>
Video 對(duì)象
常用的屬性和方法：
video.addEventListener("play",() => {});
video.onplay = () => {}
視頻格式與流媒體
video支持的視頻的格式主要有三種：MP4、ogg、webm。
Firefox ：支持Ogg Theora格式和WEBM Opera ：支持Ogg Theora格式和WEBM Safari ：支持MP4 Chrome ：支持Ogg Theora格式，MP4和WEBM Internet Explorer 9 ：支持MP4和WEBM(需要安裝插件) IOS ：支持MP4 Android ：支持MP4和WEBM(Android 2.3版本以上)
流媒體是指采用流式傳輸?shù)姆绞皆贗nternet播放的媒體格式(流媒體格式video標(biāo)簽是不支持的)。
流媒體又叫流式媒體，它是指商家用一個(gè)視頻傳送服務(wù)器把節(jié)目當(dāng)成數(shù)據(jù)包發(fā)出，傳送到網(wǎng)絡(luò)上。
用戶通過解壓設(shè)備對(duì)這些數(shù)據(jù)進(jìn)行解壓后，節(jié)目就會(huì)像發(fā)送前那樣顯示出來。
典型的流媒體格式：rtmp、rtsp、flv都是流媒體的傳輸協(xié)議。
rtmp 是Adobe公司提供的一個(gè)流媒體協(xié)議，使用的是TCP協(xié)議，穩(wěn)定性好
rtsp 是Netscape網(wǎng)景公司提供的一種協(xié)議，使用的是UDP協(xié)議，實(shí)時(shí)性好
flv 是蘋果公司提出的一個(gè)流媒體的一個(gè)協(xié)議，也是使用的TCP協(xié)議，把整個(gè)視頻流切割成一段一段的m3u8文件
Video.js
ideo的基本使用方法
1）<video src="url">您的瀏覽器不支持video標(biāo)簽，請(qǐng)使用google瀏覽器瀏覽</video>
2）加入要添加預(yù)加載圖片，添加屬性poster="圖片URL"
<video poster="圖片的url">
<source src="視頻URL"></source>
您的瀏覽器不支持video標(biāo)簽，請(qǐng)使用google瀏覽器瀏覽
</video>
注意：視頻的格式不同，支持的瀏覽不同
常見的視頻格式：ogg(ogv)/MPEG4(mp4)/WEBM(webm)
加入非要在不支持的瀏覽器上看效果，那么你得準(zhǔn)備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>
當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻： <a href="myvideo.webm">下載視頻</a>
</video>
2、常見固有屬性
autoPlay（加載完成自動(dòng)播放）
controls（使用的時(shí)瀏覽器默認(rèn)的控件）
loop(循環(huán)播放)
width（video的寬度）
height（video的高度）
src(視頻的地址)
video.currentTime（當(dāng)前視頻的播放事件）
video.duration（視頻播放的總時(shí)長(zhǎng)）
3、常見的事件（方法）
video.play()---播放視頻
video.pause()---暫停視頻播放
4、全屏設(shè)置：(注意設(shè)置全屏的時(shí)候，element的選取，不要加到video上面，否則全屏?xí)r會(huì)出現(xiàn)默認(rèn)的控件，也有可能導(dǎo)致視頻全屏?xí)r不可以看到畫面，這里注意element一般時(shí)所有控制器與video標(biāo)簽最近的共同的父元素)
全屏：element.webkitRequestFullScreen();
element.mozRequestFullScreen();
element.requestFullScreen();
取消全屏：document.webkitCancelFullScreen();
document.mozCancelFullScreen();
document.cancelFullScreen();
5、設(shè)置音量
video.volume 取值范圍為0-1
如果使用input[type='range']時(shí)，可以設(shè)置range的min=0，max=10,在onchange事件時(shí)取得range的值除以10表示音量大小
eg:video.volume = $("input[type='range']").val()/10;
注：如果需要設(shè)置靜音模式，直接將音量設(shè)置為0
video.volume = 0;
6、播放進(jìn)度
video.currentTime的改變是通過video的timeupdate事件而改變，所以在設(shè)置的時(shí)候，我們需要在值改變的時(shí)候，添加事件video.addEventListener("timeupdate",playTime,true);
eg1:
$("#playRange").on("change",function(){
// alert($(this).val())
vdo.currentTime = $(this).val();
vdo.addEventListener("timeupdate",playTime,true);
}
天小編將分享前端開發(fā)中必學(xué)的知識(shí)點(diǎn)，HTML5中關(guān)于音視頻處理
基本內(nèi)容：目前國(guó)內(nèi)的視頻網(wǎng)站 - Flash技術(shù)，HTML5的視頻處理首先替換Flash技術(shù)，支持的視頻格式有：
1.MP4 - .mp4 目前比較主流的視頻格式。
2.OGG - .ogv 手機(jī)端的視頻格式。
3.WebM - 目前唯一一個(gè)支持超高清視頻格式，該視頻格式出自Goggle公司。
問： 如何處理視頻？
答：<video>元素 - 引入單個(gè)格式視頻文件，它由自己的屬性組成。 src屬性 - 指定視頻文件的地址， width屬性 - 設(shè)置視頻寬度， height屬性 - 設(shè)置視頻高度。語法規(guī)范：<video src="視頻文件路徑" width=“100px”>
?。⌒枰⒁獾氖牵阂曨l的寬高比不會(huì)改變， 在video元素內(nèi)定義不支持的提示內(nèi)容。
如果要想在<video>元素引入多個(gè)格式視頻文件，那么就使用<source/>，使用這種方式能夠?qū)崿F(xiàn)各個(gè)瀏覽器的兼容性，語法規(guī)范：
<video>
<source src="視頻文件路徑1"/>
<source src="視頻文件路徑2"/>
<source src="視頻文件路徑3"/>
</video>
<video>元素的屬性
autoplay屬性 - 自動(dòng)播放
controls屬性 - 提供控制面板
loop屬性 - 循環(huán)播放
poster屬性 - 播放之前顯示一張圖片
preload屬性 - 預(yù)加載(視頻)
none - 不加載
auto - (默認(rèn)值)自動(dòng)(盡快加載完畢)
metadata - 只加載除視頻之外的信息(寬和高)
video的高級(jí)用法 方法
play() - 播放視頻
pause() - 暫停視頻
load() - 加載視頻
canPlayType() - 判斷是否支持該格式
事件
play - 播放視頻時(shí)觸發(fā)
pause - 暫停視頻時(shí)觸發(fā)
ended - 結(jié)束播放時(shí)觸發(fā)
error - 播放錯(cuò)誤時(shí)觸發(fā)
canplay - 可播放時(shí)觸發(fā)(不考慮整體)
canplaythrough - 整體播放順利時(shí)觸發(fā)
progress - 下載進(jìn)度
屬性
paused - 判斷視頻當(dāng)前是否暫停，如果暫停狀態(tài),返回true
ended - 判斷視頻當(dāng)前是否結(jié)束播放，如果結(jié)束播放,返回true
duration - 當(dāng)前視頻的總時(shí)長(zhǎng)
currentTime - 獲取或設(shè)置當(dāng)前視頻播放的位置
基本內(nèi)容：目前HTML頁(yè)面實(shí)現(xiàn)音頻處理，將Windows Media Player播放器,內(nèi)置頁(yè)面中，使用Flash技術(shù)實(shí)現(xiàn)音頻處理，HTML5實(shí)現(xiàn)音頻處理支持的音頻格式有：
1.mp3 - 感謝百度(MP3)
2.ogg
3.wav
問： 如何使用音頻？
答： audio元素 - 引入一種音頻格式。
<audio>元素的屬性
src屬性 - 引入音頻文件，作用 - 實(shí)現(xiàn)頁(yè)面背景音樂播放
audio元素 - 引入多種音頻格式
source元素
autoplay - 自動(dòng)播放
controls - 提供控制面板
loop - 循環(huán)播放
preload - 預(yù)加載
audio的高級(jí)用法
事件
play - 播放音頻時(shí)觸發(fā)
方法
play() - 播放音頻
pause() - 暫停音頻
屬性
paused - true,表示暫停狀態(tài)
！！ 需要特別注意，IE 8及之前的版本都不支持
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
