html5视频播放器下载完成后如何播放视频？答案

【问题标题】：how to play video after complete download in html5 video player?html5视频播放器下载完成后如何播放视频？
【发布时间】：2018-03-21 15:20:42
【问题描述】：

    // 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 事件在我播放视频时被调用，但我想在不播放视频的情况下调用。

【问题讨论】：

您可以简单地播放视频以使其开始加载。
但我不想手动播放它会在下载完成后自动播放。
HTML5 Video - Percentage Loaded? 可能重复，但使用 VueJS 包装代码...

标签： javascript html video vue.js video-player

【解决方案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()
           }
          }

【讨论】：