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

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 共享 link 会将您重定向到 一次性使用 URL 下载内容。也许当视频播放器尝试循环播放时，它会再次尝试访问重定向的目标。

这可能会显示在浏览器的网络流量中，因此值得一看。（例如，如果您使用的是 Chrome，Chrome 检查器的网络选项卡。）

Answer 2

我会看看 squarespace 是否会让您将视频的二进制文件保存到文本文件中，然后使用 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();
});

但是，重复之间有轻微的延迟！

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

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

javascript

html

html5-video

dropbox