如何使用javascript嵌入来自保管箱的视频

How to embed video from dropbox using javascript?

本文关键字：保管箱 的视频 何使用 javascript      更新时间：2023-09-26

我试图嵌入来自YouTube的视频，但因为youtube品牌。即使在添加需要参数后，YouTube品牌也不会完全隐藏。所以我想从那里切换。

我现在想从保管箱嵌入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();

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

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

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>

这应该可以完成工作：

在你的网页中

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

您可以随时动态更改视频文件网址，具体取决于您希望如何执行此操作。

有一些报道称这在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 存储桶。如此简单，而且如此便宜 - 以我的使用水平。

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

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

相关文章：