来自Dropbox的Mp4与HTML5视频播放器一起使用，并不重复

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

我在Squarespace网站上工作,他们不允许上传视频,因此我使用Dropbox来托管视频。

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

3 个解决方案

#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.

只是一个猜测,但我怀疑这与重定向有关。其上带有?dl = 1的Dropbox共享链接会将您重定向到一次性使用URL以下载内容。也许当视频播放器尝试循环时,它会尝试再次访问重定向的目标。

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.)

这可能会显示在来自浏览器的网络流量中,因此值得一看。 (例如,Chrome浏览器的网络标签,如果您使用的是Chrome。)

#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.

我会看到squarespace是否允许您将视频的二进制文件保存到文本文件中,然后使用AJAX导入它并将其保存到indexedDB,然后再将其转换为视频。

Here's some links:

这是一些链接:

Display a video from a Blob Javascript

显示Blob Javascript中的视频

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

#3

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

为了防止任何人仍然需要解决方案,我找到了使用jQuery的解决方法:

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

However, there is a slight delay between repeats!

但是,重复之间有一点延迟!

#1