](http://hwx.vbnxbc.cn/static/img/04.swf">)

preload=”none” 浏览器就不会预加载任何视频数据

poster=”封面图地址” 为其占位，展示封面图地址

展示视频地址

  1. <video autoplay style="margin-top:30px;width: 100%;height: 100%" preload="none"  controls poster="../../../assets/img/lan.png">
  2.      <source :src="`${publicPath}video/shipin.mp4`"/>
  3. </video>

video 标签

image.png

Video API 事件

image.png
image.png
image.png
image.png

  1. <body>
  2.     <video controls src="./data/mv.mp4" id="myVideo"></video>
  3.     <div id="playNode">播放</div>
  4.     <div id="stopNode">暂停</div>
  5.     <div id="gogogo">快进</div>
  7.     <script>
  8.         // 选中 video 标签
  9.         var VideoNode = document.getElementById('myVideo');
  11.         // 直接设置视频 第30秒
  12.         VideoNode.currentTime = 30;
  14.         // 快进
  15.         gogogo.onclick = function () {
  16.             VideoNode.currentTime = VideoNode.currentTime + 3;
  17.         }
  19.         // 看一下视频的长度 以分钟： 秒
  20.         setTimeout(function () {
  21.             var min = parseInt(VideoNode.duration / 60);
  22.             var sec = parseInt(VideoNode.duration % 60);
  23.             console.log(min + ':' + sec)
  24.         }, 100);
  26.         // 播放事件
  27.         stopNode.onclick = function () {
  28.             VideoNode.pause()
  29.         };
  30.         // 暂停事件
  31.         playNode.onclick = function () {
  32.             VideoNode.play()
  33.         }
  35.     </script>
  36. </body>

audio 标签

image.png

audio API 事件

image.png
image.png
image.png
image.png
addEventListener() // 事件监听
image.png
setInterval() // 方法会不停地调用函数
image.png
image.png
image.png
image.png
image.png
image.png
image.png