javascript - 如何使用 JavaScript 嵌入 Dropbox 中的视频？

Question

我试图嵌入来自 youtube 的视频，但由于 youtube 品牌。即使添加了 require 参数之后，youtube 品牌也没有完全隐藏。所以我想改变这一点。

我现在想嵌入 Dropbox 中的 mp4 视频。我该如何继续呢？

以下是我在 YouTube 上使用的引用代码。

youtubeLoadVideos : function () {
    var videos = document.getElementsByClassName("youtube");
        for (var i=0; i<videos.length; i++) {
            var youtube = videos[i];
            var iframe = document.createElement("iframe");              
            iframe.setAttribute("src", "http://www.youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;enablejsapi=1&;origin=http://www.youtube.com&;rel=0;");

            iframe.style.width = youtube.style.width;
            iframe.style.height = youtube.style.height;
            iframe.style.clear = 'both';
            youtube.parentNode.appendChild(iframe, youtube);
                        }
    }

以下是我累的:

new_video = document.createElement('video');
new_source = document.createElement('source');
final_video1 = document.getElementById('container').appendChild(new_video);
final_video1.setAttribute('id','sample');
final_video = document.getElementById('container').appendChild(new_video).appendChild(new_source);
final_video.setAttribute('src', 'https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');
final_video.setAttribute('type', 'video/mp4;codecs="vp8, vorbis"');
$('#sample')[0].play();

此视频正在加载和播放，但没有播放按钮，也没有音量按钮。总之没有控制栏。为此可以做什么？

最新更新 2:

new_video = document.createElement('video');
video = document.getElementById('RIZfC358yRk').appendChild(new_video);
source = document.createElement('source');  
source.setAttribute('src','https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');
video.appendChild(source);
video.play();

有了这个，我可以附加视频，但也缺少控制栏。没有播放按钮，没有进度条，也没有暂停按钮。我怎样才能添加这些？请帮我找出问题所在？

Answer 1

这就是你想要实现的目标吗？

http://www.lockergnome.com/media/2012/06/26/how-use-dropbox-host-stream-videos/

示例:

<video controls="controls" height="480" width="640">
<source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4"></source>
</video>

这应该可以完成工作:

在 HTML 中

<div id="container">
  <video>
    <source src="blah.mp4" type="video/mp4" />
  </video>
</div>

你的JS(创建一些onClick函数并使用以下代码)

var videoFile = 'YOUR_VIDEO_URL';
$('#container video source').attr('src', videoFile);
$("#container video")[0].load();

您始终可以动态更改您的 videoFile url，具体取决于您想要如何执行此操作。