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

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

1 个答案: