video

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; 
}