zoukankan      html  css  js  c++  java
  • 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; 
    }
  • 相关阅读:
    手撕RPC框架
    关于JVM的一些冷知识
    luoguP2627 修剪草坪
    [USACO16OPEN]248
    luoguP1171 售货员的难题
    luoguP2016 战略游戏
    luoguP2422 良好的感觉
    POJ1160 [IOI2000]Post Office
    luoguP2015 二叉苹果树
    BZOJ1756 小白逛公园
  • 原文地址:https://www.cnblogs.com/miangao/p/11975686.html
Copyright © 2011-2022 走看看