Mp4 from Dropbox used with HTML5 video player, is not repeating

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

@Ferrrmolina, how can I do that with Javascript? To add only "loop". — Marian07, May 05 '15 at 20:32
Check this: [HTML Audio/Video DOM loop Property](http://www.w3schools.com/tags/av_prop_loop.asp) — Ferrmolina, May 05 '15 at 20:40
Thanks, but it doesn't work. I think this attribute is not the problem because when I change the video source(a temporary link from google drive), the video is repeating. — Marian07, May 05 '15 at 20:45

score 1 · Accepted Answer · answered May 05 '15 at 21:02

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. (E.g. the network tab of Chrome inspector, if you're using Chrome.)

answered May 05 '15 at 21:02

user94559

59,196
6
103
103

I was afraid of that. And I think this is why the video does not repeat. What do you think about replacing the element ? Will this make the video play again? Or not, because It was once called. – Marian07 May 05 '15 at 21:08

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

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/

edited May 23 '17 at 12:00

Community

1
1

answered May 05 '15 at 21:46

Max F

121
1
8

Thanks for telling me about this possibility. Unfortunately, neither text files are not allowed. – Marian07 May 06 '15 at 09:56

score 0 · Answer 3 · edited Nov 10 '15 at 05:31

0

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!

edited Nov 10 '15 at 05:31

Alex Pan

4,341
8
34
45

answered Nov 10 '15 at 04:57

mwmw

3
1

Mp4 from Dropbox used with HTML5 video player, is not repeating

3 Answers3