Video的自我学习

  <!-- 显示控制条 -->
  <video src="./test.mp4" id="vs" width="400" height="225" controls ></video>
  <!-- 禁用控制条的某个按钮    例如下载，全屏等 -->
  <video src="./test.mp4" controls controlslist="nodownload nofullscreen"></video>
  <!-- 贴图 -->
  <video src="./test.mp4" width="400" height="225" controls poster="./poster.jpg"></video>
  <!-- 自动播放 -->
  <video src="./test.mp4" width="400" height="225" autoplay controls "></video>
  <!-- 静音 -->
  <video src="./test.mp4" width="400" height="225" muted controls ></video>
  <!-- 循环播放 -->
  <video src="./test.mp4" width="400" height="225" muted loop controls ></video>
  <!-- 预加载 -->
  <video src="./test.mp4" width="400" height="225" preload controls ></video>
  <!-- 音量控制 -->
  <video src="./test.mp4" id="_volume" width="400" height="225" controls></video>
  <script type="text/javascript">
    var v = document.getElementById(‘_volume‘);
    v.volume = 0.5;
  </script> 
  <!-- 播放时间控制    设置从当前多少秒开始播放，可用于跳过片头-->
  <video src="./test.mp4" id="_time" width="400" height="225" controls></video>
  <script type="text/javascript">
    var v = document.getElementById(‘_time‘);
    console.log(v.currentTime);
    v.currentTime = 60;// 单位：秒
  </script>
  <!-- 播放地址的切换 -->
  <video src="./test.mp4" id="_src" width="400" height="225" controls></video>
  <script type="text/javascript">
        var v = document.getElementById(‘_src‘);
        console.log(v.src);
        setTimeout(function() {
          v.src = ‘./test-2.mp4‘;
        }, 2000);
  </script>
  <!-- 备用地址切换 -->
  <video id="_source" controls  width="400" height="225">
      <source src="./test3.mp4" type="video/mp4">
      <source src="./test4.mp4" type="video/mp4">
  </video>
  <script type="text/javascript">
    var v = document.getElementById(‘_source‘);
    setTimeout(function() {
      console.log(‘src‘, v.currentSrc)
    }, 1000);
  </script> 
--------------------------------- 华丽的分割线 ------------------------------------------
  <!-- 所有关于Video播放的监听事件 (看情况，使用对应的监听事件)-->
  <!-- 顶格注释内容，为常用监听事件，其他视项目实际情况而定! -->
  <script type="text/javascript">
    // 视频监听
    var v = document.getElementById(‘vs‘);
    console.log(‘v.duration‘, v.duration);
    // loadstart
    v.addEventListener(‘loadstart‘, function(e) {
      console.log(‘loadstart‘, v.duration);
    });
// durationchange 时长变化（拿到总时长）
    v.addEventListener(‘durationchange‘, function(e) {
      console.log(‘durationchange‘, v.duration);
    });
// loadedmetadata （拿到元数据）
    v.addEventListener(‘loadedmetadata‘, function(e) {
      console.log(‘loadedmetadata‘);
    });
    // loadeddata（不够帧去播放）
    v.addEventListener(‘loadeddata‘, function(e) {
      console.log(‘loadeddata‘);
    });
    // progress（下载时候触发）
    v.addEventListener(‘progress‘, function(e) {
      console.log(‘progress‘);
    });
// canplay（准备完成，下载好了）
    v.addEventListener(‘canplay‘, function(e) {
      console.log(‘canplay‘);
    });
// canplaythrough（足够帧数播放了）
    v.addEventListener(‘canplaythrough‘, function(e) {
      console.log(‘canplaythrough‘);
    });
// play（播放）
    v.addEventListener(‘play‘, function(e) {
      console.log(‘play‘);
    });
// pause （暂停）
    v.addEventListener(‘pause‘, function(e) {
      console.log(‘pause‘);
    });
    // seeking（点某个位置）
    v.addEventListener(‘seeking‘, function(e) {
      console.log(‘seeking‘);
    });
    // seeded （下载那个点的视频可播放了，触发，即seeking结束）
    v.addEventListener(‘seeked‘, function(e) {
      console.log(‘seeded‘);
    });
    // waiting（当没有足够数据播放时，触法play时间时，会触发waiting事件）
    v.addEventListener(‘waiting‘, function(e) {
      console.log(‘waiting‘);
    });
    // playing
    v.addEventListener(‘playing‘, function(e) {
      console.log(‘playing‘);
    });
// timeupdate（精确获取播放时间更新的事件）
    v.addEventListener(‘timeupdate‘, function(e) {
      console.log(‘timeupdate‘);
    });
// ended（结束事件）
    v.addEventListener(‘ended‘, function(e) {
      console.log(‘ended‘);
    });
// error(报错信息)
    v.addEventListener(‘error‘, function(e) {
      console.log(‘error‘, e);
    });
  </script>