How can I get a callback when the audio tag is ready to play. (to tell the user, when implementing my own controls)
Using Chrome.
Have only done this on the video element but it should work for audio.
Firstly, you can't bind the event, I don't know why that doesn't work. So you have to use setTimeout.
Example using jQuery:
$(function(){
var audioReady = function(){
if (youraudioelement.attr('readyState')) {
alert("it's ready!");
} else {
setTimeout(audioReady, 250);
}
}
audioReady();
}
More info: http://www.w3.org/TR/html5/video.html#the-ready-states
Can you not bind to the onloadeddata event? It works for me. W3C Reference
Have you looked at the canplaythrough event?
Related
I would like to know how to speed up a youtube video 2x without the user clicking on the HTML5 (of the video), but instead by modifying the URL.
For example, I know how to watch video starting at a specific time by appending to the URL the parameter &t=1m1s (for 1 minute and one second). Is it possible to use a similar method to speed up the video 2x?
What parameters should I add to the URL to watch video in double speed (I'm using html5)?
There's no way to change playback speed by URL arguments.
Anyway, if you're working with HTML, you can take advantage of the YouTube Player iFrame API.
Here's how to configure your player with all the JavaScript:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
And here's the function you're looking for to set playback speed:
https://developers.google.com/youtube/iframe_api_reference#Playback_rate
So you can edit your onPlayerReady function like this:
function onPlayerReady(event) {
player.setPlaybackRate(2); // This is what you're looking for
event.target.playVideo();
}
You can of course pass on step 5 of the documentation as this will stop your video from playing after six seconds.
If you have trouble setting that up, I'll edit a JSFiddle later (couldn't do it at work as my Flash plugin won't launch).
Update :
Here's the JSFiddle working fine with this code exactly:
http://jsfiddle.net/jpreynat/e11oy0eu/
I was trying to do this exact same thing earlier this week.
A solution purely from a URL parameter isn't possible. (or if it is,
it's not documentation here:
https://developers.google.com/youtube/player_parameters)
I came accros this JSFiddle by Johan Preynat: http://jsfiddle.net/jpreynat/e11oy0eu/
Worked for me, so hopefully it'll be useful for you too
HTML
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
JavaScript
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.setPlaybackRate(2);
event.target.playVideo();
}
See also the YouTube documentation on this:
https://developers.google.com/youtube/iframe_api_reference
Can you inject a shift > or < from users input via url or easier javascript? Maybe its easier to force the hot key press from the users end.
I'm using video.js to embed a video into an HTML page. It is to be used as a ipad-only web app so I believe that it's using the native HTML5 player. I'm trying to disable the click-to-play functionality (so that the user must use the controls) but I am having trouble doing so.
I've tried unbinding the click event (using jQuery) form the video/video player/poster and I've tried using addevent to add e.preventDefault() to the video but none of this seems to work.
Ps. I found a couple of posts saying you could comment out a line in the code, but this line doesn't exist in my version - maybe the plugin has been rewritten.
Check here
https://github.com/videojs/video.js/blob/master/docs/api/vjs.MediaTechController.md#removecontrolslisteners
So for example
v = videojs('scene04-video');
v.tech.removeControlsListeners();
You can try this. It helped me. Just add this to css file:
.video-js.vjs-playing .vjs-tech {
pointer-events: none;
}
It would be helpful to know which version you are using. This works for me on 4.1 (latest api)
// Disable big-play-button
videojs.Player.prototype.options_.children.bigPlayButton = false;
// Override click handler on media object;
videojs.MediaTechController.prototype.onClick = function() {};
// Initialize video
var vid = videojs("video", {});
// Show controls (since in my browser it doesn't think it needs to inititally)
vid.controlBar.show();
UPDATE: I should clarify that the above only works using the dev.js API (not the prod/minified version). In the minified version, the MediaTechController's onClick function name isn't preserved, you can't reliably override it. In this case, you can try manually disconnecting the the HTML5 and Flash click events:
videojs.Html5.off('click');
videojs.Flash.off('click');
var vid = videojs("video", {}, function() {
this.bigPlayButton.hide();
});
// Again - show the controlbar (optionally)
vid.controlBar.show();
Check this:
.vjs-tech {
pointer-events: none;
}
How can I listen to the events play/stop/pause of a HTML5 video?
I tried with the following code:
$("video").on('play',function(){
//my code here
});
but it does not work.
Alternatively I would be fine also intercept the click that stop and start the video (in fact I would prefer), but even this code not works:
$('video').on('click', function(event) {
//my code here
});
I think because often above the video element is placed a div with associated events start and stop, but I do not know how to select via jQuery or Javascript:
P.S. This code should work on pages that are composed dynamically / not generated by me, so I can not refer the elements indicating their ID or a specific class.
UPDATE
I did not realize that the page on which I was testing had a video inside an iframe.
The syntax is best suited to my needs:
doc.querySelector("video").addEventListener('play', function(e) {
//my code here
}, true);
See here:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
So... :
$("video")[0].onplay = function () {
// Do play stuff here
};
Hope that helps!
Your first attempt should work. But you need to make sure that jQuery is actually finding video elements. You say that the page is generated dynamically, so perhaps it's possible that your code is running before the video elements are added. This would also be the case if your script is higher up in the document than the video elements (e.g., in the <head>).
Try placing the following code immediately before the code you have there and check the output:
console.log($("video"));
If the output is an empty array, then you aren't finding any video elements. Try placing your script at the very end of the page or inside a DOMContentLoaded event. Or, if another script is generating the video elements, make sure your script runs after that one.
A few other notes on your question:
There is no stop event. Here's a list of media events.
I don't think the click event is what you want. That will fire no matter where on the video the user clicks: play button, volume control, etc.
The video being placed inside a div shouldn't have any effect on these events. I'm not sure why you'd have start and end events on a div, so maybe I'm not following.
Give this a try!
//Direct
<video id="videoThis" src="blahhh.mp4" onended="yourFunction()"></videoThis>
-or-
//JavaScript (HTML5)
document.querySelector("#videoThis").addEventListener("ended",yourFunction,false);
-or-
//jQuery
$("#videoThis").bind("ended",yourFunction);
I need to play and pause the video player if any part of the video is clicked, so I implemented something like:
$("#promoPlayer").click(function() {
$("#promoPlayer").click(function() {
if(this.paused){
this.play();
} else {
this.pause();
}
});
...but now the controls of the video won't pause/play.
You can see it in action here(http://175.107.134.113:8080/). The video is the second slide on the main carousel at the top.
I suspect I'm now getting 2 onclick events one from my code above and a second on the actual pause/play button.
I don't understand how the actual video controls work, because when I inspect the element, I just see a tag. If I could differentiate the controls, then perhaps I might have figured out a solution by now.
Anyone know how I should have done this, or is my solution ok. If my solutions ok, how do I intercept a click on the control, so that I only have one click event to pause / play?
If you look on the media element home page, they have a big play button, complete with mouseOver, but I can't see how they have done that? Can someone else help?
The controls of the browser's native player are not individual DOM elements so I don't believe there's a way to identify them.
My suggestion would be to create an invisible div which covers the player but not the controls, and bind your logic to that.
Ok, I was being an idiot. I hadn't initialised the MediaElement player:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false
});
});
Which mean't that what I thought was MediaElement, was actually just my browser's native support for the tag...
As expected MediaElement does of course give you such things as being able to click the whole video frame and have the video start for free...
The player should already play/pause on click, but if you want to attach events it's best to do so within the success handler:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
success: function(media, domElement, player) {
$('#somebutton').on('click', function() {
media.play();
});
}
});
});
I'm trying to use this code to add an anchor element and set it's onclick event to some Javascript. But no event is being loaded. Looking at the DOM through Firebug tells me that Mootools is indeed added. The element has almost all of the Mootools element functions. But it lacks addEvent.
var delete_ctl = new Element('a',
{
'href' : '#',
'events' :
{
'click' : function() { alert('foo'); }
}
});
delete_ctl.appendText('Remove');
delete_ctl.inject(root);
delete_ctl.addEvent('click', function() { alert('foo'); });
The rendered code in Firebug lacks any indication that the onclick event has been set. When the code is run, Firebug reports a Javascript error: "addEvent is not a function." I feel like I'm missing something basic here.
You code works fine on my machine. I get twice alerts of 'foo'.
Make sure you use the right version of mootools.
Make sure root really references an HTML element in the DOM.
Make sure you run this code after the DOM finished loading (onload or domready events).
Good luck.