【H5】 video音频标签

【H5】 video音频标签：

多媒体标签 video

< video src=""> </ video>

1. src ：引入路径
2. autoplay : 自动播放
3. width ： 宽
4. height ： 高
5. controls： 控件
6. preload： 是否等到加载再播放
7. Autobuffer： 缓存

<video 
    src='mp4/v.f30.mp4' 
    width='500' 
    height="500" 
    controls 
    loop 
    preload="" 
    Autobuffer>
    您的浏览器不支持 HTML 5 Video标签，请升级浏览器
  </video>

video控制属性：

1. oVideo.muted : 控制音频样式是否为静音：

true 为静音效果
false 有音效果

2. oVideo.volume : 控制声音

默认为100% / 1
静音值为 0
取值范围 0 - 1

3. oVideo.currentTime : 视频当前播放时间

4. oVideo.duration : 视频总时间

5. oVideo.pause(); 视频暂停

6. oVideo.play(); 视频播放

<video 
   src='mp4/v.f30.mp4' 
   width='500' 
   height="500"
   controls
   loop
   preload=""
   Autobuffer>
   您的浏览器不支持 HTML 5 Video 标签，请升级浏览器
</video>
<button> 播放 </button>

<script>
  let oVideo = document.getElementsByTagName('video')[0]; //获取视频标签
  let btn = document.querySelector('button'); //获取按钮标签
  let mark = false; //控制播放暂停
  // oVideo.muted = false;  //视频静音
  oVideo.volume = 0;  //控制音量0~1
  btn.onclick = function(){
      if( mark ){
          oVideo.pause(); //视频暂停
          this.innerHTML = "播放"
          console.log( oVideo.duration )    //获取视频的总时间
          console.log( oVideo.currentTime ) //获取视频播放时的时间
      }else{
          oVideo.play();  //视频播放
          this.innerHTML = "暂停"
          console.log( oVideo.duration )
          console.log( oVideo.currentTime )
      }
      mark = !mark;
  }
  console.log( oVideo.muted )   //静音false 有声true
  console.log( oVideo.volume  ) //输出音量0~1
</script>

source视频兼容

<!-- source标签内写多种格式的视频便于兼容不同浏览器 -->
 <video 
   width='500' 
   height="500"
   controls
   loop
   preload=""
   Autobuffer>
   <source src='mp4/v.f30.ogg' type="video/ogg" />
   <source src='mp4/v.f30.ogv' type="video/ogv" />
   您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。
 </video>

效果图如下：