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 编码器

音频和视频编码/解码是一种算法, 用来对于一段特定的视频或音频进行解码和编码,以便音频和视频能够播放,原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费的时间是无法忍受的, 如果不对其进行解码,就无法将编码后的数据重组为原始的媒体资源

1. 视频编解码器

H.264
VP8 (google开源)
Ogg Theora

2. 音频编解码器

AAC
MPEG-3
Ogg Vorbis

H.264: 别名MPEG-4, 由MPEG研发并于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 标签属性

src 视频url地址
. width 设置播放器宽度
. height 设置播放器高度
.controls 向用户显示播放控件。controls是布尔值，有值就是true，即使controls="false",字符串"false"转成布尔值也是true。没有controls这个属性才是false
autoplay 视频就绪自动播放。
muted 视频静音
loop 播放完是否继续播放该视频，循环播放
poster 加载等待的画面图片
preload 是否需要预加载
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动态图。preload视频没播放就已经加载-->
  <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的原生控件，自己写的按钮调用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元素的属性）

currentTime : 开始到播放现在所用的时间(单位是秒) 可读可写
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值可读可写
muted : 是否静音 false /true
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
poster: 视频播放前的预览图片(可读写)
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/>
        是否发生错误:${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>
    // 默认控制器可能存在兼容问题，多浏览器可能不兼容、每个浏览器控件的长相也不一样，不统一，所以有时要自定义控制器，不使用默认的控件。
    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/>
        是否发生错误:${video.error}<br/>
        地址:${video.currentSrc}<br/>
        预览图:${video.poster}<br/>
        视频宽:${video.videoWidth}<br/>
        视频高:${video.videoHeight}`
    }
  </script>
</body>

3.4 . video视频基本事件

onplay 视频播放时触发的事件
onpause 视频暂停时触发的事件
ontimeupdate 视频在播放时持续触发是事件
onended 视频播放结束时触发的事件

<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 循环
preload 是否等加载完再播放
muted 静音

4.2. audio API属性

duration 音乐的总时间(只读)
currentTime 音乐当前时间(可读写)
volume: 0-1 的音量绝对值(可读写)
ended 音乐播是否播放完毕(只读)
play: 音乐播放(只读)
pause:音乐暂停(只读)
error: 媒体发生错误的时候,返回错误代码(只读)
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 () {//监听timeupdate事件，触发事件处理函数
      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()//再执行处理当前时间与进度函数
      //鼠标抬起
      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>

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属性

推荐阅读更多精彩内容