如何在html5视频播放器中完成下载后播放视频？

问题描述：

// htm video tag 
    <video id="myVideo" width="320" height="176" preload="auto" controls> 
     <source src="/server/o//content/test2.mp4" onerror="alert('video not found')" type="video/mp4"> Your browser does not support HTML5 video. 
    </video> 

    // vuejs script 
    start() { 
     myVideo.onprogress = function(e) { 
     try { 
      var pro = myVideo.buffered.end(0)/e.srcElement.duration * 100 
      myVideo.play() 
      vprogress.value = Math.round(pro) 
      if (Math.round(e.srcElement.buffered.end(0))/Math.round(e.srcElement.seekable.end(0)) === 1) { 
      alert('download complete') 
      alert(this.showvideo) 
      } 
     } catch (e) { 
      console.log(e) 
     } 
     } 
    } 
    }, 
    mounted() { 
    this.start() 
    }

我想在网页加载时下载视频，完成下载后它会自动播放当我播放视频时会调用进行中的事件，但我想在不播放视频的情况下拨打电话。如何在html5视频播放器中完成下载后播放视频？

你可以非常简短地播放视频，使其开始加载。 – neuhaus

但我不想手动播放，它会在完成下载后自动播放。 –

[HTML5视频 - 已加载百分比？]（https://stackoverflow.com/questions/5029519/html5-video-percentage-loaded）可能重复，但包含VueJS代码... –

答

您应该尝试检查视频对象的readyState属性。尝试这样的：

// htm video tag 
     <video id="myVideo" width="320" height="176" preload="auto" controls> 
      <source src="/server/o//content/test2.mp4" onerror="alert('video not found')" type="video/mp4"> Your browser does not support HTML5 video. 
     </video> 
// vuejs script 
     start() { 
      myVideo.onprogress = function(e) { 
      try { 
       var pro = myVideo.buffered.end(0)/e.srcElement.duration * 100 
       myVideo.play() 
       vprogress.value = Math.round(pro) 
       if (Math.round(e.srcElement.buffered.end(0))/Math.round(e.srcElement.seekable.end(0)) === 1) { 
       alert('download complete') 
       alert(this.showvideo) 
       } 
      } catch (e) { 
       console.log(e) 
      } 
      } 
     **strong text**} 
     }, 
     ready() { 
      let video = document.getElementById("myVideo"); 
      if (video.readyState === 4) { 
      this.start() 
      } 
      }

如何在html5视频播放器中完成下载后播放视频？

相关推荐