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