how to play video after complete download in html5 video player?

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

I want to download video on page load and after complete download it will play auto automatically onprogress event is called when i play the video but i want to call without playing the video .

Answer 1

You should try to check readyState property of video object. Try something like this:

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