2017-10-10 237 views
2
// 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() 
    } 

我想在網頁加載時下載視頻,完成下載後它會自動播放 當我播放視頻時會調用進行中的事件,但我想在不播放視頻的情況下撥打電話。如何在html5視頻播放器中完成下載後播放視頻?

+0

你可以非常簡短地播放視頻,使其開始加載。 – neuhaus

+0

但我不想手動播放,它會在完成下載後自動播放。 –

+0

[HTML5視頻 - 已加載百分比?](https://stackoverflow.com/questions/5029519/html5-video-percentage-loaded)可能重複,但包含VueJS代碼... –

回答

0

您應該嘗試檢查視頻對象的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() 
      } 
      }