how to create endless video autoplay in javascript and vimeo api? - javascript

I am a little bit stuck right now with a code.
In fact, I would like to create Vimeo's videos autoplay list on my website using javascript as we can see on youtube.
As you will see on the script below, the click event allows changing the iframe videos. I'd like when my first video in my list of Vimeo's iframe videos end, the second video can start automatically to play as on youtube autoplay.
Please advise.
Here is the link to my script on codepen.io
https://codepen.io/fanhatcha/pen/XQoWdR
<iframe
id="playerarea"
src=""
width="850"
height="450"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen>
</iframe>
<ul id="playlist">
<li vimeourl="https://player.vimeo.com/video/328821953?autoplay=0&loop=1&autopause=0&background=1&responsive=true">
<li vimeourl="https://player.vimeo.com/video/328821360?autoplay=0&loop=1&autopause=0&background=1&responsive=true">
</ul>
$(function() {
$("#playlist li").on("click", function() {
$("#playerarea").attr({
"src": $(this).attr("vimeourl"),
})
})
})

'create Vimeo's videos autoplay using javascript?' that just can be!
Vimeo(so is Youtube) are standalone programs. So they'll work only in embed context and won't use JavaScript who can manage and use DOM.
To set a video to autoplay you've to log into the Vimeo application and set it using theirs parameters before sharing it to your own page.
If you could use JavaScript on a program who's not yours it's a flaw and threat for the program...certainly you did agree use and terms of the licence of using Vimeo, so you're bind to their rules.
If you want videos and use them with JavaScript there's the HTML5 API video. By the way it'll require not using a corporate program who will reccord and display the video and use your own server to do that(or any source providing a video files and not a link to the vimeo/youtube application).

Related

adding youtube live streaming video to my site

I want to add youtube live streaming video to my site this is the link
https://www.youtube.com/watch?v=EGYAnAoMbmA
and this is the code but it did not work:
<iframe width="560" height="315" src="https://www.youtube.com/watch?v=EGYAnAoMbmA" frameborder="0" allowfullscreen></iframe>
As the folks in the comments suggest, you should check to see if your YouTube video allows embedding.
Google has this procedure. Briefly speaking, first sign into YouTube, then go to your Video Manager. Click Edit beside the video you want to embed, then under the "advanced settings", find the "Distribution Options" and make sure the "Allow embedding" checkbox is checked; otherwise the embed will not work.
The good thing is that there appears to be no problem with your embed code, so it should only be a matter of making sure your video is even embeddable.

Which is better ifram or <video> to play video (both youtube as well non youtube) in terms of browser compatibility?

I tried with both
iframe - no solution to stop autoplay or control video for non-youtube videos
video - Does not support youtube video
Using iframe
<iframe id="vt" width="420" autoplay="false" height="345" src="http://cache4.asset-cache.net/xd/468140002.mp4?v=1&c=IWSAsset&k=2&d=72990B68305E4FDFEE95B69A879131BCD6D7111452E48A17C03F8342D660D5A451EBC1DEC2A827C9&b=RTdG" frameborder="0" allowfullscreen></iframe>
jQuery(document).ready(function () {
// var url = $('#vt').attr('src');
// $('#vt').attr('src', '');
// $('#vt').attr('src', url);
var vid = document.getElementById("vt");
vid.pause()
//vid.onpause = function() {
//alert("The video has been paused");
};
});
with video tag
<video width="320" height="240" src="https://www.youtube.com/watch?v=dwH34mR6ZG8" controls="controls"> </video>
First of all, iframes were never meant for displaying embedded media. That's something the object tag was intended to handle instead. From the MDN docs:
The HTML Inline Frame Element (<iframe>) represents a nested browsing
context, effectively embedding another HTML page into the current
page.
The HTML Embedded Object Element (<object>) represents an external
resource, which can be treated as an image, a nested browsing context,
or a resource to be handled by a plugin.
Both of which predate the video element, which is what you should always be using to embed video content in a webpage.
Secondly, YouTube videos aren't meant to be linked directly from a <video> element... the embed code they provide you with is an iframe that opens up to an HTML5 video player anyway (or a Flash fallback for antique devices).
Verdict: If the video you're trying to display isn't or can't be hosted on YouTube, use the video tag on a webpage to embed it, making sure to convert the video in as many supported formats as possible. There's plenty of write-ups online on HTML5 video, so I won't detail the process here.

End events for embedded videos

I'm trying to find a way to listen for the end/complete event of a video embedded from youtube/metacafe/vimeo etc. I know this can be accomplished by things like the youtube API using onStateChange with a value of 0, but I'm curious if it can be done without having to go through the API.
For example if I have something like:
<div id="video-container">
<iframe width="420" height="315" src="http://www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen></iframe>
</div>
is there anyway I can listen for the end event on the div or iframe?
kind of like this:
Javascript player for managing playlist of vimeo *and* youtube videos?
But I'm interested in adding several sources so it would be much easier if I didn't have to go through the APIs.
Thanks-
I think, it's not possible for youtube. It would be possible if you used your own flash player. You would be able to call custom javaScript function from yuor flash player.

video (autoplay) gets hidden via javascript but already starts on pageload?

i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it nearly started.
the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the pageload (you can hear the sound in the background) but i want to have the autoplay to start right after click on the preview-image...
here's the example how i did it so far (click on the flower-images will make the video visible): http://brayaz.de/test/example.html
thanks for any help!
You need to change the url in your YouTube embed code to "autoplay=0" instead of "autoplay=1".
So change
<iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
to
<iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
If you want the video to start right after clicking the thumbnail, you'll need some javascript. If that is the case, see: https://code.google.com/apis/ajax/playground/?exp=youtube#chromeless_player
This is pretty complicated, as the APIs for different services (ie SoundCloud, Vimeo, YouTube) will behave differently.
The best solution I can come up with is to listen for a click event on the thumbnail, then test for the embedded media type, then send a 'play' API call based on the media type (ie SoundCloud audio, Vimeo video).
That solution would require javascript, however. Perhaps someone smarter will find a different way round!

Is there a way to “seek” to a certain time in a video using JavaScript?

I have an iframe with a video, for example:
<iframe src="http://player.vimeo.com/video/18150336" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
The source won't always be vimeo, it can be YouTube, BrightCove, Hulu etc etc.
Is there a way to use jQuery/JavaScript to "seek" to a certain time in the video? For example, if I wanted to get to 3:41 inside of a video could I write code to automatically seek to that time w/o API access to the sites providing the video?
Sure. You can use VideoJS. You may have a hard time getting control of the iFrame as you put it. You can embed various video hosting sites' video with VideoJS, supposedly.
<script>
VideoJS.DOMReady(function() {
var player = VideoJS.setup("current_video");
player.play();
player.currentTime(666);
});
</script>
ref:
https://github.com/zencoder/video-js/blob/df41661f47201cfbc979b1fbba68fba3d67c06b0/dev/src/tech/youtube.js
http://videojs.com/
https://github.com/zencoder/video-js/blob/master/docs/api.md
Unless your website also has the host, protocol and port of http://player.vimeo.com, you can not run any code on the iframe's document.
Unfortunately, not always. There is no single solution to seek a time in a Flash video if you don't know what the source of the video is.
If you ever encounter HTML5 video, you can try this: Start HTML5 video at a particular position when loading?

Resources