0

我试图从 youtube 嵌入视频，但由于 youtube 品牌。即使在添加了要求参数之后，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=&quot;vp8, vorbis&quot;');
$('#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();

有了这个，我可以附加视频，但在这个也缺少控制栏。播放按钮不存在，进度条不存在，暂停按钮也不存在。我该如何添加这些？请帮我找出问题？

4

4 回答 4

2

这是你想要达到的目标吗？

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，具体取决于您要如何执行此操作。

于 2013-09-20T10:21:17.193 回答
1

有报道称这在 Dropbox ( http://forums.whirlpool.net.au/archive/2309430 )上不再有效。但是，此 URL 的解决方案似乎有效：http ://cantonbecker.com/work/musings/2014/how-to-directly-link-or-embed-dropbox-images/ 。

第二个链接提倡的解决方案是使用“?raw=1”后缀。

它似乎是 Dropbox 在其网站上推广的一项合法功能：https ://blogs.dropbox.com/developers/2013/08/programmatically-download-content-from-share-links/以及这里https:// www.dropbox.com/en/help/201。

（自发布此消息以来，我已切换到使用 AWS S3 存储桶。非常简单，而且非常便宜 - 在我的使用水平上。）

于 2015-04-28T00:09:21.893 回答
0 
new_video = document.createElement('video');
new_video.setAttribute('controls','true');
new_video.setAttribute('autoBuffering','true');

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.load();
video.play();
于 2013-09-20T15:20:05.467 回答
0

在 DropBox 上上传您的视频 > 获取公共链接 > 在链接中只需将后缀“?dl=0”替换为“?raw=1”

于 2016-11-07T11:20:43.863 回答