与HTML5视频播放器一起使用的Dropbox的mp4，不再重复

Question

I'm working on a Squarespace website, and they don't allow video upload, so I'm using Dropbox to host a video.

The video starts playing, but he is not repeating.

This is the code:

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

What could be the problem?

This is how I create the 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

Just a guess, but I suspect this relates to redirects. A Dropbox share link with ?dl=1 on it will redirect you to a one-time use URL to download the content. Perhaps when the video player tries to loop, it tries to access the target of the redirect again.

This might show up in the network traffic from the browser, so it's worth taking a look. (Eg the network tab of Chrome inspector, if you're using Chrome.)

Answer 2

I would see if squarespace will let you save the binary of the video into a text file and then import it with AJAX and save it to indexedDB before converting it to video.

Here's some links:

Display a video from a Blob Javascript

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

Answer 3

Just in case anyone still needs the solution, I found a workaround using jQuery:

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

However, there is a slight delay between repeats!