video

 支持的视频格式

videojs支持视频格式：mp4，webm，ogv ，m3u8，flv，rtmp
注意：rtsp没法直接用，需要做格式转换，转成flv，或者rtmp

 

js获取视频时长

https://blog.csdn.net/zml_moxueli/article/details/75891943

 

Js实现video自动跳转到上次观看的位置、获取视频总时长

<video id="myvideo" controls>
      <source
        src="https://vdse.bdstatic.com//b84fba2d24e31318aea3b215b0d394a9?authorization=bce-auth-v1/fb297a5cc0fb434c971b8fa103e8dd7b/2017-05-11T09:02:31Z/-1//243721300cb13899ad3f3b37abde401c8aafdb6c21222eedf75ba61771ae42d4"
        type="video/mp4"
      />
    </video>

 

    var video = document.getElementById("myvideo");
//获取缓存的观看过的视频时长
    var local= localStorage.getItem("currentTime");
    video.addEventListener("loadedmetadata", function() {
      this.currentTime = local;
      console.log(this.currentTime)
    });
 //观看过的视频时长载入到缓存
    video.addEventListener("timeupdate", function() {
      var proceed = Math.floor(video.currentTime);
      localStorage.setItem("currentTime", proceed);
      console.log(proceed)
    });
  //视频拓展--获取视频的总长度
    setTimeout(() => {
      var allTime = video.duration;
      console.log(allTime)
    }, 800);

 

解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException

 

比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将muted去掉。或者让用户手动去打开音频（腾讯视频就是这样做的）。

<video autoplay muted></video>

　　

// 任意操作解除视频禁音
    document.body.addEventListener('mousedown', function(){
        document.getElementById('player').muted = false;
    }, false);

 

video默认背景图片，并平铺

poster:默认背景图片地址

object-fit:fill; 背景平铺

<video id="player" muted  width="100%" height controls="controls" :poster="lj_video.ImageUrl" :src="lj_video.VideoUrl"></video>

#player{
  object-fit:fill; 
}