I was trying to embed video from youtube but because of youtube branding. Even after adding require parameters youtube branding is not hiding pletely. So that I want to switch from that.

I want to embed mp4 videos from dropbox now. How can I proceed for that?

Following is my reference code which I used for 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", "/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;enablejsapi=1&;origin=;;rel=0;");

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

Following is what I tired :

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', '.mp4');
final_video.setAttribute('type', 'video/mp4;codecs="vp8, vorbis"');
$('#sample')[0].play();

With this Video is loading and playing but there is no play button no volume button. In short there is no control bar. What can be done for this?

Latest Update 2 :

new_video = document.createElement('video');
video = document.getElementById('RIZfC358yRk').appendChild(new_video);
source = document.createElement('source');  
source.setAttribute('src','.mp4');
video.appendChild(source);
video.play();

With this I am able to append video but in this also control bar is missing. Play button is not there, progress bar is not there, pause button is also not there. How can I add those? Please Help me in finding the problem?

I was trying to embed video from youtube but because of youtube branding. Even after adding require parameters youtube branding is not hiding pletely. So that I want to switch from that.

I want to embed mp4 videos from dropbox now. How can I proceed for that?

Following is my reference code which I used for 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./embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;enablejsapi=1&;origin=http://www.youtube.&;rel=0;");

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

Following is what I tired :

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./u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');
final_video.setAttribute('type', 'video/mp4;codecs="vp8, vorbis"');
$('#sample')[0].play();

With this Video is loading and playing but there is no play button no volume button. In short there is no control bar. What can be done for this?

Latest Update 2 :

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

With this I am able to append video but in this also control bar is missing. Play button is not there, progress bar is not there, pause button is also not there. How can I add those? Please Help me in finding the problem?

• javascript
• jquery
• youtube-api
• dropbox
• dropbox-api

4 Answers 4

Is this what are you trying to achieve?

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

example:

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

This should do the job:

in your HTML

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

Your JS (create some onClick function and use the following code)

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

You can always change your videoFile url dynamically, depending on how do you want to do that.

There were some reports that this does not work any more on Dropbox (http://forums.whirlpool.au/archive/2309430). However the solution at this URL seems to work: http://cantonbecker./work/musings/2014/how-to-directly-link-or-embed-dropbox-images/.

The solution advocated at that 2nd link is to use a "?raw=1" suffix.

And it appears to be a legitimate feature promoted by Dropbox on its site: https://blogs.dropbox./developers/2013/08/programmatically-download-content-from-share-links/ and also here https://www.dropbox./en/help/201.

(Since posting this, I have switched to using an AWS S3 bucket. So very easy, and so inexpensive - at my level of usage.)

Upload your video on DropBox > Get a public link > In link just replace suffix "?dl=0" to "?raw=1"

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./u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');

video.appendChild(source);

video.load();
video.play();