Vedio的使用

属性

<video
     controls 
     autoplay
     loop
     preload = "auto"
     poster = "./popup.png"
     webkit-playsinline = "true"
     playsinline = "true"
     x5-video-player-type = "h5"
     x5-video-player-fullscreen = "true"
     x5-webkit-airplay = "allow"
     x5-video-orientation = "portranint"  >
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg" codecs=dirac speex>
</video>
  • controls 显示标准html5视频/音频播放器控制条
  • autoplay 自动播放
  • loop 让文件循环播放
  • proload 用来缓存大体积文件，可选值有三个 none 不缓存 auto 缓存metadata 之缓存文件元信息
  • poster 视频封面
  • webkit-playsinlin = "true" ios10中有用，其他暂不支持，让视频小窗口内播放也就是不全屏播放
  • x5-video-player-type = "h5"启用H5播放器，是wechat特性，就是在视频全屏的时候，div可以呈现在视频层上，
  • x5-video-player-fullscreen = "true" 全屏设置，设置为true是防止横屏
  • x5-video-orientation = "portraint"播放器屏幕方向，landscape 横屏 portraint 竖屏 默认竖屏，需要开启h5模式（x5-video-player-type）
  • source - 标签是为了能够兼容各种浏览器对不同媒体类型的支持，我们可以用多个元素来提供多个不同的媒体类型。支持mp4格式视频流的浏览器可以播放mp4文件，如果不支持，可以播放Ogg文件
  • 是用来指定播放使用的解码器(codecs); 这样就可以更精确的让浏览器如何播放提供的视频。

事件

let media = document.querySelector("video")

网络状态

  • media.currentSrc 返回当前资源的url

  • media.src 返回设置当前资源的url

  • media.canPlayType(type) 能否播放某种格式的资源，返回三个字符串 maybe probably or " "

    
    <div>
        <button onclick="checkVideoCompat();">
            Test for video format type
        </button>
    </div>
    <div id="display"> </div>
	 function checkVideoCompat() {
      var myvideo = document.createElement("video");
      var msg = document.getElementById("display");
      msg.innerHTML = "";
      if(myvideo.canPlayType) {
        var playMsg = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"');
        if ("" != playMsg) {
          msg.innerHTML += "mp4/H.264 is " + playMsg + " supported <br/>";
        }
        playMsg = myvideo.canPlayType('video/ogg; codecs="theora"');
        if ("" != playMsg) {
          msg.innerHTML += "ogg is " + playMsg + " supported<br/>";
        }
        playMsg = myvideo.canPlayType('video/webm; codecs="vp8, vorbis"');
        if ("" != playMsg) {
          msg.innerHTML += "webm is " + playMsg + " supported<br/>";
        }
      } else {
        msg.innerHTML += "no video support";
      }
    }
  </script>

  • media.networkState 0:此元素未初始化 1:正常但没有使用网络 2:正在下载数据 3：没有找到资源

    • NETWORK_EMPTY (数值 0)
      所在的media元素没有被初始化，所有的属性还是初始状态。
    • NETWORK_IDLE (数值1)
      这个元素的资源选择算法已经激活，并且选择了一个资源，但它实际上没有使用网络。
    • NETWORK_LOADING (数值2)
      用户处于活动，正在加载数据。
    • NETWORK_NO_SOURCE (数值3)
      这个元素的资源选择算法已经激活，但还没有发现可用资源。

  • media.load 重新加载src的指定资源

  • media.preload none不加载 metadata:预载资源信息 auto

准备状态

  • media.readyState HAVE_NOTHING HAVE_METADATA HAVE_CURRENT_DATA HAVE_FUTURE_DATA HAVE_ENOUGH_DATA
  • media.seeking 是否正在seeking

回放状态

  • media.currentTime = value 当前播放位置，赋值可改变位置

  • media.startTime 一般为0 如果为流媒体或者不从0开始的资源则不为0

  • media.duration 当前资源长度，流返回无限

  • media.paused 是否暂停

    //播放按钮
let btn = document.querySelector("button")
btn.onClick = function(){
    if(media.paused){
        media.play()
        btn.textContent = "||"
    }else{
        media.pause();
        btn.textContent = ">"
    }
}

  • media.played 返回已经播放的区域 TimeRanges

  • media.seekable 返回可以seek的区域 TimeRanges

  • media.ended 是否结束

  • media.autoPlay 是否自动播放

  • media.loop 是否循环播放

  • media.play 播放

  • media.pause 暂停

视频控制

  • media.controls 是否有默认控制条

  • media.volume= value 音量

  • media.muted = value 静音

TimeRanges

  • TimeRanges.length; //区域段数
  • TimeRanges.start(index) //第index段区域的开始位置
  • TimeRanges.end(index) //第index段区域的结束位置

以下是可以为其绑定的方法 ---addEventListner绑定。否则加on

var eventTester = function(e){
     Media.addEventListener(e,function(){
         console.log((new Date()).getTime(),e)
     },false);
 }
  • eventTester("loadstart"); //客户端开始请求数据
  • eventTester("progress"); //客户端正在请求数据
  • eventTester("suspend"); //延迟下载
  • eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
  • eventTester("loadstart"); //客户端开始请求数据
  • eventTester("progress"); //客户端正在请求数据
  • eventTester("suspend"); //延迟下载
  • eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
  • eventTester("error"); //请求数据时遇到错误
  • eventTester("stalled"); //网速失速
  • eventTester("play"); //play()和autoplay开始播放时触发
  • eventTester("pause"); //pause()触发
  • eventTester("loadedmetadata"); //成功获取资源长度
  • eventTester("loadeddata"); //
  • eventTester("waiting"); //等待数据，并非错误
  • eventTester("playing"); //开始回放
  • eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
  • eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
  • eventTester("seeking"); //寻找中
  • eventTester("seeked"); //寻找完毕
  • eventTester("timeupdate"); //播放时间改变
  • eventTester("ended"); //播放结束
  • eventTester("ratechange"); //播放速率改变
  • eventTester("durationchange"); //资源长度改变
  • eventTester("volumechange"); //音量改变

详细内容：https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh924823(v=vs.85)

常见API地址https://www.runoob.com/jsref/jsref-tutorial.html

posted @ 2020-11-02 15:11  Yanzq-X  阅读(1858)  评论(0)    收藏  举报