html5ビデオプレーヤーで完全にダウンロードした後、ビデオを再生する方法は？

Question

// 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() 
    } 

私はビデオを再生するときにビデオを再生するときに onprogressイベントが呼び出されますが、完全なダウンロード後にビデオをダウンロードして完全なダウンロードをしたいと思います。

Answer 1

ビデオオブジェクトの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() 
      } 
      }