I've got probably very simple question but I cannot figure it out myself:
var video = $("myVideo"); video.pause();
I am trying to prevent the video from playing on page load (so I can later play it on mouse enter).
It says it's not a function.
Anyone can help?
video.pause() is not a jQuery function, you need to get the DOM object, easy way to do that is video[0], so try video[0].pause().
I'm looking for a way to create something like a loading animation on a html5 video similar to the Youtube Video display (reference: https://www.youtube.com/watch?v=5vcCBHVyG50)
I tried it with the canplay-Event but I think I misunderstood the real meaning of this event.
My thought of this event was that enough data has been loaded and buffered so that the video can be played again.
But in my case this event just fires once. At the beginning of the video.
Is there any special Event which will be fired when the video is playable or needs to load more data?
Use fontAwesome framework. It has got your animation.
I have a MP4/H264 video clip which is being captured so that it grows every 4 seconds and its metadata is dynamically refreshed. Since this is not fragmented MP4 I cannot use MediaSource API to manipulate chunks.
I'm looking for a way to update/refresh the duration of the video during playback without the need to reload the whole clip.
In short words I'm looking for a way to do the following in more user-friendly way.
setInterval(function() {
video.src = video.src;
}, 4000);
I'd like to avoid having 2 video tags and switching from one to another with the method above. I have also tried with popcorn.js without any luck.
Using Chrome, and... only chrome so not worried about other browsers.
Any advice would be greatly appreciated!
I am not sure that is possible. As per specs:
If a src attribute of a media element is set or changed, the user agent must invoke the media element's media element load algorithm. (Removing the src attribute does not do this, even if there are source elements present.)
So if you touch the video.src the browser should invoke implicitly video.load(). In your case (setInterval) Chrome does this.
I guess you already went the route of saving the currentTime of the video before changing the src and applying it after the src change (wait for the canplay event in this case and call video.play() to resume playing)? I guess you would have some stuttering for 4 seconds refresh in your case.
It seems that you are trying to emulate a live stream as an on demand feed and I do not know a way to do this with progressive download of mp4 (read with un-fragmented MP4).
Related article.
Thanks
var ytplayer = document.getElementById("movie_player");
ytplayer.addEventListener('onStateChange', 'onPlayerChange');
function onPlayerChange(newState) {
alert('do something at least...');
if(newState == 0) {
alert('movie has stopped');
}
}
This is how I try to listen to YouTube events with a Google Chrome extension. It doesn't give me any error at all, even though it should when the movie has finished. Or at least when the state has changed. Does anyone know what is wrong?
Console doesn't give me any errors.
Your code works fine on Firefox because the player is Flash. However Chrome supports HTML5 and the player is HTML5 Video Player. So there is no element which has "movie_player" id. Are you sure your video player is Flash on Chrome. Right click the video and see player info in context menu. More details about YouTube HTML5 Player.
Youtube HTML5 player is currently in trial, so you should detect user's player mode and add a fallback for it at least YT completely use HTML5.
The HTML5 video element fires its own events. Right now, it looks like the easiest way to get at it is by class name (since it doesn’t have an id):
var videoElement = document.getElementsByClassName('video-stream')[0];
Video elements fire a bunch of events, which you can find listed here in the HTML5 spec.
For example:
videoElement.addEventListener('pause', function(){ alert('paused!'); })
When I hide a YouTube video, it stops playing. However, this is not the case for Vimeo videos. Is there another way to stop a Vimeo video?
First, add an ID to your iFrame. Then add this to your javascript close window click function:
var $frame = $('iframe#yourIframeId');
// saves the current iframe source
var vidsrc = $frame.attr('src');
// sets the source to nothing, stopping the video
$frame.attr('src','');
// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);
I recently needed to pause a Vimeo video that was inside a Bootstrap modal when the modal was closed.
The Vimeo video was embedded in an iframe.
This is what worked for me:
$("#my-bootstrap-modal").on('hidden.bs.modal', function (e) {
var div = document.getElementById("my-bootstrap-modal");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
iframe.postMessage('{"method":"pause"}', '*');
});
Vimeo has a JavaScript API that allows you to access and invoke many properties and methods on the video player (including pausing the video and also unloading it completely). They also have an API Playground and some examples on GitHub.
[Edit]
Since you mention that you use the Universal Embed Code, here are some caveats from the web site:
With the Universal Embed Code, the only way to interact with the player is by using window.postMessage. postMessage is a relatively new development, so it's oly available in the following browsers: Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome, and Opera 9+.
Because of the complexities involved with postMessage, we've written a JS mini-library that does all the hard work for you! You can find it on the downloads page or you can see some examples below.
To restore the SRC attribute, use the following before clearing:
var source = $('iframe#yourVideoId').attr('src');
Next, SRC attribute clear:
$('iframe#yourVideoId').attr('src', '');
Callback previous SRC attribute:
$('iframe#yourVideoId').attr('src', source);
var vidUrl = $("iframe#video-frame").attr('src');
//Basically stops and starts the video on modal open/close
$('#video').on('hidden.bs.modal', function (e) {
$("iframe#video-frame").attr('src','');
});
$('#video').on('show.bs.modal', function (e) {
$("iframe#video-frame").attr('src', vidUrl);
})
Another answer along the lines of David's...you can use jQuery to clear the SRC attribute of the iFrame.
$('iframe#targetID').attr('src','');
I'm using this with a Vimeo video and a lightbox effect. When the lightbox is triggered again, I add the video URL back to the iFrame SRC before showing it.
Using the Vimeo JavaScript API, it can be done with:
player.unload()
https://github.com/vimeo/player.js#unload-promisevoid-error