從Dropbox使用HTML5視頻播放器的MP4，不重複

Question

我正在Squarespace網站上工作，他們不允許視頻上傳，因此我使用Dropbox來託管視頻。

視頻開始播放，但他沒有重複。

這是代碼：

<video id="htmlVideo" loop="loop"> 
    <source type="video/mp4" src="https://www.dropbox.com/s/videoID/videoplayback.mp4?dl=1"> 
</video> 

可能是什麼問題呢？

這是我如何創建視頻

/* 
function repeatForDropbox() { 
    console.log("repeatForDropbox caled" + htmlVideo); 
} 
*/ 

function createVideo() { 
    var video = document.createElement("video"); 
     video.id = "htmlVideo"; 
     video.loop = "loop"; 

    var vidSource = document.createElement("source"); 
     vidSource.type = "video/mp4"; 
     vidSource.src = "https://www.dropbox.com/s/videoID/videoplayback.mp4?dl=1"; 

    video.appendChild(vidSource); 

    var vidLocation = document.querySelector('#location').parentNode; 
     vidLocation.appendChild(video); 
    htmlVideo = document.querySelector(" #htmlVideo "); 

    // on load, play the video/mp4 
    window.onload = function() { 
     setTimeout(function() { 
      htmlVideo.play(); 
      // htmlVideo.addEventListener("ended", repeatForDropbox);           
      // I tried here to make the video repeat, using the "ended" event listener 
      // so when the video ended, the video 
      // should get another <source> element(same src) 
      // and delete the old one 
      // but the event didn't fire 
      // I also tried htmlVideo.onended = function() {} , but same result 
     }, 500); 
    } 
} 

Answer 1

只是一個猜測，但我懷疑這涉及到重定向。一個帶有？dl = 1的Dropbox共享鏈接會將您重定向到一次性使用 URL來下載內容。也許當視頻播放器嘗試循環時，它會嘗試再次訪問重定向的目標。

這可能會出現在來自瀏覽器的網絡流量中，所以值得一看。 （例如，如果您使用的是Chrome瀏覽器的網絡選項卡）。

Answer 2

我會看到如果廣場空間會讓您將視頻的二進制文件保存到文本文件中，然後使用AJAX導入並將其保存到indexedDB然後將其轉換爲視頻。

下面是一些鏈接：

Display a video from a Blob Javascript

https://simpl.info/video/offline/

Answer 3

萬一還有人需求的解決方案，我發現使用jQuery解決方法：

$('video').on('ended', function() { 
    this.load(); 
    this.play(); 
}); 

然而，有一個重複之間的輕微延遲！