99精品在线看,日韩激情婷婷五月

HTML 5 多媒體

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

1. 視頻音頻了解

1.1. 主流的視頻文件格式

MPEG-4: 通常以.mp4為擴展名
Flash視頻: 通常以.flv為擴展名
Ogg: 通常以.ogv為擴展名
WebM: 通常以.webm為擴展名
音頻視頻交錯: 通常以.avi為擴展名

1.2 音頻格式：

Ogg .ogg
MP3 .mp3
ACC .acc

1.3 編碼器

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

1. 視頻編解碼器

H.264
VP8 (google開源)
Ogg Theora

2. 音頻編解碼器

AAC
MPEG-3
Ogg Vorbis

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

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

2. 視頻音頻基本使用

2.1 基本使用標簽

HTML <video> 元素用于在HTML或者XHTML文檔中嵌入媒體播放器，用于支持文檔內(nèi)的視頻播放。

HTML <audio> 元素用于在文檔中嵌入音頻內(nèi)容。

// 視頻
<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>

由于瀏覽器視頻格式的編輯碼器不一樣,導(dǎo)致有兼容問題,這個時候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 標簽屬性

src 視頻url地址
. width 設(shè)置播放器寬度
. height 設(shè)置播放器高度
.controls 向用戶顯示播放控件。controls是布爾值，有值就是true，即使controls="false",字符串"false"轉(zhuǎn)成布爾值也是true。沒有controls這個屬性才是false
autoplay 視頻就緒自動播放。
muted 視頻靜音
loop 播放完是否繼續(xù)播放該視頻，循環(huán)播放
poster 加載等待的畫面圖片
preload 是否需要預(yù)加載
autobuffer 設(shè)置為瀏覽器緩沖方式，不設(shè)置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視頻沒播放就已經(jīng)加載-->
  <video width="600" height="300"  src="./video/這一路.mp4"  controls poster="./images/222.jpg"  preload></video>

3.2. Video API方法(JS操控DOM元素的方法)

play() 開始播放視頻
pause() 停止播放視頻
load() 重新加載媒體(比如用sourch換資源了)
全屏:

webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen(); //官方的
退出全屏：
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的原生控件，自己寫的按鈕調(diào)用Video的API方法  播放
    }
    pause.onclick = function () {
      video.pause()  //沒有使用video的原生控件，自己寫的按鈕調(diào)用Video的API方法 暫停
    }
    reload.onclick = function () {
      video.src = "./video/第三套古詩韻律操.mp4"
      video.load()  //沒有使用video的原生控件，自己寫的按鈕調(diào)用Video的API方法  重新加載
    }
    all.onclick = function () {
      video.requestFullscreen() //全屏
    }
    close.onclick = function () {
      video.exitFullscreen() //退出全屏
    }
  </script>
</body>

3.3. Video API屬性（JS操控DOM元素的屬性）

currentTime : 開始到播放現(xiàn)在所用的時間(單位是秒) 可讀可寫
duration : 媒體總時間(只讀)
volume : 0.0-1.0的音量相對值可讀可寫
muted : 是否靜音 false /true
paused : 媒體是否暫停(只讀)
ended : 媒體是否播放完畢(只讀)
error : 媒體發(fā)生錯誤的時候，返回錯誤代碼 (只讀)
currentSrc : 以字符串的形式返回媒體地址(只讀)
poster: 視頻播放前的預(yù)覽圖片(可讀寫)
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/>
        預(yù)覽圖:${video.poster}<br/>
        視頻寬:${video.videoWidth}<br/>
        視頻高:${video.videoHeight}`
    }
  </script>
</body>

3.4 . video視頻基本事件

onplay 視頻播放時觸發(fā)的事件
onpause 視頻暫停時觸發(fā)的事件
ontimeupdate 視頻在播放時持續(xù)觸發(fā)是事件
onended 視頻播放結(jié)束時觸發(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 標簽屬性

src 要播放的音頻的 URL。
. autoplay 自動播放
controls 向用戶顯示播放控件
loop 循環(huán)
preload 是否等加載完再播放
muted 靜音

4.2. audio API屬性

duration 音樂的總時間(只讀)
currentTime 音樂當前時間(可讀寫)
volume: 0-1 的音量絕對值(可讀寫)
ended 音樂播是否播放完畢(只讀)
play: 音樂播放(只讀)
pause:音樂暫停(只讀)
error: 媒體發(fā)生錯誤的時候,返回錯誤代碼(只讀)
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ā)事件處理函數(shù)
      getCurrentTime()
      // console.log(this.currentTime)
    }, false)

    //處理當前時間與進度
    function getCurrentTime() {
      currTime.value = formaTime(oVide.currentTime)
      // 進度條
      // 計算當前視頻播放的比例
      let decimal = oVide.currentTime / oVide.duration//播放小數(shù)比等于播放的時長除以總時長
      pro_bar.style.left = decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'//小球定位定位等于播放小數(shù)比乘以容器的寬度減去小球的寬度
      //進度條背景的移動
      pro_bg.style.width = 20 + decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'
    }
    function formaTime(time) {//定義格式化時間函數(shù)formaTime()  forma表示格式化。轉(zhuǎn)成 時：分：秒
      time = time && +time;//有可能是null或字符串，不存在就是null 字符串就轉(zhuǎn)成數(shù)字類型，所以使用邏輯與
      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}`
    }
    //兩位數(shù)字函數(shù)(時間變成兩位)
    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
        }
        //設(shè)置進度條移動
        pro_bar.style.left = _left + 'px'
        //設(shè)置進度條移動
        pro_bg.style.width = 20 + _left + 'px';
        //計算拖拽百分比小數(shù)
        let processDecimal = _left / (pro.offsetWidth - pro_bar.offsetWidth)  //距離除以總長
        // 計算當前時間
        oVide.currentTime = processDecimal * oVide.duration// 小數(shù)乘以總時長
      }
      getCurrentTime()//再執(zhí)行處理當前時間與進度函數(shù)
      //鼠標抬起
      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>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

HTML 5 多媒體

HTML 5 多媒體

HTML 5 多媒體

1. 視頻音頻了解

1.1. 主流的視頻文件格式

1.2 音頻格式：

1.3 編碼器

1. 視頻編解碼器

2. 音頻編解碼器

2. 視頻音頻基本使用

2.1 基本使用標簽

2.2. 兼容處理

標簽的兼容

視頻格式的兼容

音頻兼容

3. Video 視頻標簽

3.1 Video 標簽屬性

3.2. Video API方法(JS操控DOM元素的方法)

3.3. Video API屬性（JS操控DOM元素的屬性）

3.4 . video視頻基本事件

4. audio 音頻標簽

4.1 audio 標簽屬性

4.2. audio API屬性

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

HTML 5 多媒體

HTML 5 多媒體

1. 視頻音頻了解

1.1. 主流的視頻文件格式

1.2 音頻格式：

1.3 編碼器

1. 視頻編解碼器

2. 音頻編解碼器

2. 視頻音頻基本使用

2.1 基本使用標簽

2.2. 兼容處理

標簽的兼容

視頻格式的兼容

音頻兼容

3. Video 視頻標簽

3.1 Video 標簽屬性

3.2. Video API方法(JS操控DOM元素的方法)

3.3. Video API屬性（JS操控DOM元素的屬性）

3.4 . video視頻基本事件

4. audio 音頻標簽

4.1 audio 標簽屬性

4.2. audio API屬性

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av