HTML 5 多媒體

HTML 5 多媒體

在HTML4.01時候想插入音頻,視頻,必須借助flash,

1. 視頻音頻了解

1.1. 主流的視頻文件格式
  1. MPEG-4: 通常以.mp4為擴展名
  2. Flash視頻: 通常以.flv為擴展名
  3. Ogg: 通常以.ogv為擴展名
  4. WebM: 通常以.webm為擴展名
  5. 音頻視頻交錯: 通常以.avi為擴展名
1.2 音頻格式:
  1. Ogg .ogg
  2. MP3 .mp3
  3. ACC .acc
1.3 編碼器

音頻和視頻編碼/解碼是一種算法, 用來對于一段特定的視頻或音頻進行解碼和編碼,以便音頻和視頻能夠播放,原始的媒體文件體積非常巨大,如果不對其進行編碼,那么數據量是非常驚人的,在互聯(lián)網上傳播則要耗費的時間是無法忍受的, 如果不對其進行解碼,就無法將編碼后的數據重組為原始的媒體資源

1. 視頻編解碼器
  1. H.264
  2. VP8 (google開源)
  3. Ogg Theora
2. 音頻編解碼器
  1. AAC
  2. MPEG-3
  3. Ogg Vorbis

H.264: 別名MPEG-4, 由MPEG研發(fā)并于2003年標準化,

當然也有一些編解碼器是受專利了保護的, 有一些這是免費的, 例如Ogg的Vorbis音頻編解碼器,Ogg的Theora視頻編碼器也是可以免費試用的, 而想使用H.264的話就需要支付相關費用了

2. 視頻音頻基本使用

2.1 基本使用標簽

HTML <video> 元素 用于在HTML或者XHTML文檔中嵌入媒體播放器,用于支持文檔內的視頻播放闪唆。

HTML <audio> 元素用于在文檔中嵌入音頻內容蝶防。

// 視頻
<video src="視頻地址" controls></video> 
// 音頻
<audio src="視頻地址" controls></video>
  <!-- 視頻有默認的寬高300*150茁裙,沒有控件controls視頻還無法播放,只能看到畫面 -->
  <video src="./video/這一路.mp4" controls></video>
  <!-- 音頻加上控件controls才能播放 -->
  <audio src="./video/zyl大歡.mp3" controls></audio>
2.2. 兼容處理
標簽的兼容
  <video src="./video/這一路.mp4" controls>當前瀏覽器不支持video冷守,請更新瀏覽器或使用chrome打開</video>

由于瀏覽器視頻格式的編輯碼器不一樣,導致有兼容問題,這個時候W3C為了解決這個問題,

兼容處理使用source標簽

視頻格式的兼容
<video>
     <!-- 羅列視頻格式-->
    <source src="./dy.mp4" type="video/mp4">
    <source src="./dy.ogg" type="video/ogg">
   
    你的瀏覽器不支持video標簽,<a href="./dy.map4">點擊下載視頻</a>
</video>
<!-- 視頻格式的兼容 -->
  <video width="600" height="300" controls>    
    <source src="./video/這一路.ogv" type="video/ogg">
    <source src="./video/這一路.mp4" type="video/mp4">
  </video>
音頻兼容
<audio>
    <source src="./dy.mp3" type="audio/mp4">
    <source src="./dy.ogg" type="audio/ogg">
    你的瀏覽器不支持audio標簽,<a href="./dy.map3">點擊下載音頻</a>
</audio>

3. Video 視頻標簽

3.1 Video 標簽屬性
  1. src 視頻url地址
  2. . width 設置播放器寬度
  3. . height 設置播放器高度
  4. .controls 向用戶顯示播放控件惫周。controls是布爾值,有值就是true炬转,即使controls="false",字符串"false"轉成布爾值也是true。沒有controls這個屬性才是false
  5. autoplay 視頻就緒自動播放算灸。
  6. muted 視頻靜音
  7. loop 播放完是否繼續(xù)播放該視頻扼劈,循環(huán)播放
  8. poster 加載等待的畫面圖片
  9. preload 是否需要預加載
  10. autobuffer 設置為瀏覽器緩沖方式,不設置autoplay才有效
 <video 
        width="1000" 
        height="300" 
        src="./dy.mp4" 
        controls 
        Preload 
        Poster='../1.jpg'
  > 你的瀏覽器不支持 H5 Video 標簽,請升級瀏覽器</video>
 <!-- 只有無聲靜音的情況下菲驴,autoplay才可以起作用荐吵,之前有聲音也自動播放,會被嚇一跳 -->
  <video width="600" height="300"  src="./video/這一路.mp4"  controls autoplay muted loop></video>
<!-- poster加載等待的畫面圖片赊瞬,相當于視頻的封面先煎,也可以用gif動態(tài)圖。preload視頻沒播放就已經加載-->
  <video width="600" height="300"  src="./video/這一路.mp4"  controls poster="./images/222.jpg"  preload></video>  
3.2. Video API方法(JS操控DOM元素的方法)
  1. play() 開始播放視頻

  2. pause() 停止播放視頻

  3. load() 重新加載媒體(比如用sourch換資源了)

  4. 全屏:

    webkit element.webkitRequestFullScreen();
    Firefox element.mozRequestFullScreen();
    W3C element.requestFullscreen(); //官方的

  5. 退出全屏:
    webkit document.webkitCancelFullScreen();
    Firefox document.mozCancelFullScreen();
    W3C document.exitFullscreen();

<body>
  <!-- 用js操控屬性巧涧,js操控要有一個id或者獲取元素-->
  <video id="video" width="600" height="300" src="./video/這一路.mp4" controls></video>
  <div> <button id="play">播放</button>
    <button id="pause">暫停</button>
    <button id="reload">重新加載</button>
    <button id="all">全屏</button>
    <button id="close">退出全屏</button>
  </div>
  <script>
    play.onclick = function () {
      video.play()  //沒有使用video的原生控件薯蝎,自己寫的按鈕調用Video的API方法  播放
    }
    pause.onclick = function () {
      video.pause()  //沒有使用video的原生控件,自己寫的按鈕調用Video的API方法 暫停
    }
    reload.onclick = function () {
      video.src = "./video/第三套古詩韻律操.mp4"
      video.load()  //沒有使用video的原生控件谤绳,自己寫的按鈕調用Video的API方法  重新加載
    }
    all.onclick = function () {
      video.requestFullscreen() //全屏
    }
    close.onclick = function () {
      video.exitFullscreen() //退出全屏
    }
  </script>
</body>
3.3. Video API屬性(JS操控DOM元素的屬性)
  1. currentTime : 開始到播放現(xiàn)在所用的時間(單位是秒) 可讀可寫
  2. duration : 媒體總時間(只讀)
  3. volume : 0.0-1.0的音量相對值 可讀可寫
  4. muted : 是否靜音 false /true
  5. paused : 媒體是否暫停(只讀)
  6. ended : 媒體是否播放完畢(只讀)
  7. error : 媒體發(fā)生錯誤的時候占锯,返回錯誤代碼 (只讀)
  8. currentSrc : 以字符串的形式返回媒體地址(只讀)
  9. poster: 視頻播放前的預覽圖片(可讀寫)
  10. videoWidth, videoHeight: 視頻實際的尺寸(只讀)
btn.onclick = function () {
    box.innerHTML = `
        當前播放時間:${video.currentTime}<br/>
        總時間:${video.duration}<br/>
        音量:${video.volume}<br/>
        是否靜音:${video.muted}<br/>
        是否暫停:${video.paused}<br/>
        是否播放完畢:${video.ended}<br/>
        是否發(fā)生錯誤:${video.error}<br/>
        地址:${video.currentSrc}`;
}
<body>
  <!-- 用js操控屬性,js操控要有一個id或者獲取元素-->
  <video id="video" width="600" height="300" src="./video/這一路.mp4" controls poster="./video/hs.jpg"></video>
  <div> <button id="play">播放</button>
  </div>
  <div id="info"></div>
  <script>
    // 默認控制器可能存在兼容問題缩筛,多瀏覽器可能不兼容消略、每個瀏覽器控件的長相也不一樣,不統(tǒng)一瞎抛,所以有時要自定義控制器艺演,不使用默認的控件。
    play.onclick = function () {
      video.currentTime = 60   //video.currentTime屬性的值是可讀可寫的
      video.volume = .2 //video.volume屬性的值是可讀可寫的
      info.innerHTML = `視頻播放時間:${video.currentTime}<br/>
        視頻總時長:${video.duration}<br/>
        視頻聲音:${video.volume}<br/>
        是否靜音:${video.muted}<br/>
        是否暫停:${video.paused}<br/>
        是否播放完畢:${video.ended}<br/>
        是否發(fā)生錯誤:${video.error}<br/>
        地址:${video.currentSrc}<br/>
        預覽圖:${video.poster}<br/>
        視頻寬:${video.videoWidth}<br/>
        視頻高:${video.videoHeight}`
    }
  </script>
</body>
3.4 . video視頻基本事件
  1. onplay 視頻播放時觸發(fā)的事件
  2. onpause 視頻暫停時觸發(fā)的事件
  3. ontimeupdate 視頻在播放時持續(xù)觸發(fā)是事件
  4. onended 視頻播放結束時觸發(fā)的事件
<body>
  <!-- 用js操控屬性,js操控要有一個id或者獲取元素-->
  <video id="video" width="600" height="300" src="./video/這一路.mp4" controls></video>
  <script>
    video.onplay = function () {
      console.log('我播放了')
    }
    video.onpause = function () {
      console.log('我暫停了')
    }
    video.ontimeupdate = function () {
      console.log('我一直在播放')
    }
    video.onended = function () {
      console.log('我播放完了,你過來啦')
    }
  </script>
</body>

4. audio 音頻標簽

4.1 audio 標簽屬性
  1. src 要播放的音頻的 URL胎撤。
  2. . autoplay 自動播放
  3. controls 向用戶顯示播放控件
  4. loop 循環(huán)
  5. preload 是否等加載完再播放
  6. muted 靜音
4.2. audio API屬性
  1. duration 音樂的總時間(只讀)
  2. currentTime 音樂當前時間(可讀寫)
  3. volume: 0-1 的音量絕對值(可讀寫)
  4. ended 音樂播是否播放完畢(只讀)
  5. play: 音樂播放(只讀)
  6. pause:音樂暫停(只讀)
  7. error: 媒體發(fā)生錯誤的時候,返回錯誤代碼(只讀)
  8. currentSrc: 以字符串的形式返回媒體地址(只讀)_

自定義視頻播放器

<body>
  <div id="wrap">
    <video id="video" width="500" height="300" poster="./resource/333.jpg">
      <source src="./video/這一路.mp4" type="video/mp4" />

      <source src="./video/這一路.ogv" type="video/ogg" />

      您的瀏覽器不支持video標簽晓殊,請您升級或更換瀏覽器!哩照!
    </video>
    <div style="height:10px;background:-webkit-linear-gradient(top,#333,#555)"></div>
    <div id="progress">
      <input id="currTime" type="text" value="00:00:00">
      <div class="pro">
        <div class="pro-bg"></div>
        <div class="pro-bar"></div>
      </div>
      <input id="allTime" type="text" value="00:00:00">
    </div>
    <div id="control">
      <a id="pre" href="javascript:;"></a>
      <a id="play" href="javascript:;"></a>
      <a id="next" href="javascript:;"></a>
      <a id="volume" href="javascript:;">
        <p class="vol">
          <span class="vol-bg"></span>
          <span class="vol-bar"></span>
        </p>
      </a>
      <a id="full" href="javascript:;"></a>
    </div>
  </div>
  <script>
    //獲取操作的元素
    //JS中沒有連字符-,要么改成下劃線_懒浮,要么改成駝峰
    let oVide = getById('video'),
      play = getById('play'),
      pre = getById('pre'),
      next = getById('next'),
      volume = getById('volume'),
      full = getById('full'),
      currTime = getById('currTime'),
      allTime = getById('allTime'),
      pro = getByClass('pro'),
      pro_bg = getByClass('pro-bg'),
      pro_bar = getByClass('pro-bar'),
      vol_bg = getByClass('vol-bg'),
      vol_bar = getByClass('vol-bar');
    //視頻播放/暫停按鈕
    // 借助信號量控制播放暫停
    let mark = true;
    play.onclick = function () {
      if (mark) {
        console.log('播放');
        oVide.play();
        this.style.backgroundPosition = "-40px 0";
      } else {
        console.log('暫停')
        oVide.pause()
        this.style.backgroundPosition = "0 0"
      }
      mark = !mark;
      // 獲取視頻總時長
      // console.log(oVide.duration)
      allTime.value = formaTime(oVide.duration)
    }
    //當前視頻播放時間
    oVide.addEventListener('timeupdate', function () {//監(jiān)聽timeupdate事件飘弧,觸發(fā)事件處理函數
      getCurrentTime()
      // console.log(this.currentTime)
    }, false)

    //處理當前時間與進度
    function getCurrentTime() {
      currTime.value = formaTime(oVide.currentTime)
      // 進度條
      // 計算當前視頻播放的比例
      let decimal = oVide.currentTime / oVide.duration//播放小數比等于播放的時長除以總時長
      pro_bar.style.left = decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'//小球定位定位等于播放小數比乘以容器的寬度減去小球的寬度
      //進度條背景的移動
      pro_bg.style.width = 20 + decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'
    }
    function formaTime(time) {//定義格式化時間函數formaTime()  forma表示格式化。轉成 時:分:秒
      time = time && +time;//有可能是null或字符串砚著,不存在就是null 字符串就轉成數字類型次伶,所以使用邏輯與
      let hh = formatZero(Math.floor(time / 3600))//獲得小時
      let mm = formatZero(Math.floor(time % 3600 / 60))//獲得分鐘
      let ss = formatZero(Math.floor(time % 60))//獲得秒
      // console.log('time',hh,mm,ss)//把這個時間渲染到頁面上
      return `${hh}:${mm}:${ss}`
    }
    //兩位數字函數(時間變成兩位)
    function formatZero(num) {
      return (num > 10 ? "" : "0") + num //得到空或者0后拼接num
    }
    //進度條的拖拽  
    pro_bar.onmousedown = function (ev) {
      ev = ev || window.event;

      let disX = ev.clientX - this.offsetLeft;//差值
      //鼠標移動
      document.onmousemove = function (ev) {
        ev = ev || window.event;
        let _left = ev.clientX - disX;
        //邊界檢測
        if (_left <= 0) {//最小值
          _left = 0;
        }
        if (_left >= pro.offsetWidth - pro_bar.offsetWidth) { //最大值
          _left = pro.offsetWidth - pro_bar.offsetWidth
        }
        //設置進度條移動
        pro_bar.style.left = _left + 'px'
        //設置進度條移動
        pro_bg.style.width = 20 + _left + 'px';
        //計算拖拽百分比小數
        let processDecimal = _left / (pro.offsetWidth - pro_bar.offsetWidth)  //距離除以總長
        // 計算當前時間
        oVide.currentTime = processDecimal * oVide.duration// 小數乘以總時長
      }
      getCurrentTime()//再執(zhí)行處理當前時間與進度函數
      //鼠標抬起
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null;
      }
    }
    // 全屏
    full.onclick = function () {
      oVide.webkitRequestFullScreen()
    }
    //通過id獲取DOM元素方法
    function getById(id) {
      return document.getElementById(id)
    }
    function getByClass(className) {
      return document.getElementsByClassName(className)[0]//只要一個元素
    }
  </script>
</body>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市稽穆,隨后出現(xiàn)的幾起案子冠王,更是在濱河造成了極大的恐慌,老刑警劉巖舌镶,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柱彻,死亡現(xiàn)場離奇詭異,居然都是意外死亡餐胀,警方通過查閱死者的電腦和手機哟楷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來否灾,“玉大人卖擅,你說我怎么就攤上這事∧迹” “怎么了惩阶?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長扣汪。 經常有香客問我断楷,道長,這世上最難降的妖魔是什么崭别? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任脐嫂,我火速辦了婚禮,結果婚禮上紊遵,老公的妹妹穿的比我還像新娘账千。我一直安慰自己,他們只是感情好暗膜,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布匀奏。 她就那樣靜靜地躺著,像睡著了一般学搜。 火紅的嫁衣襯著肌膚如雪娃善。 梳的紋絲不亂的頭發(fā)上论衍,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音聚磺,去河邊找鬼坯台。 笑死,一個胖子當著我的面吹牛瘫寝,可吹牛的內容都是我干的蜒蕾。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼焕阿,長吁一口氣:“原來是場噩夢啊……” “哼咪啡!你這毒婦竟也來了?” 一聲冷哼從身側響起暮屡,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤撤摸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后褒纲,有當地人在樹林里發(fā)現(xiàn)了一具尸體准夷,經...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年莺掠,在試婚紗的時候發(fā)現(xiàn)自己被綠了冕象。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡汁蝶,死狀恐怖渐扮,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情掖棉,我是刑警寧澤墓律,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站幔亥,受9級特大地震影響耻讽,放射性物質發(fā)生泄漏。R本人自食惡果不足惜帕棉,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一针肥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧香伴,春花似錦慰枕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春蜂厅,著一層夾襖步出監(jiān)牢的瞬間匪凡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工掘猿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留病游,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓稠通,卻偏偏與公主長得像衬衬,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子采记,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容