I have a problem with detect of showing poster.
On macbook and iphone the video tag isn't working so well, so I decided to use the poster tag instead.
I have a small jQuery code to change poster dynamically with some fadeout and in effect. But I want to use this effect only when video is not playable.
So I am looking for a solution that helps me to detect if the video is not playable on a device.
UPDATE: canPlayType() isn't a good solution, because the result is "maybe" (almost on every device) for 'video/mp4' but it doesn't play on Safari...
$(document).ready(function() {
//HERE I WANT TO CHECK IF VIDEO NOT PLAYABLE
var poster_array = [
"picture_1", "picture_2", "picture_3", "picture_4"
];
var i = 1;
setInterval(function() {
$("#customcontent8 video").fadeOut(200);
$("#customcontent8 video").promise().done(function() {
$("#customcontent8 video").attr("poster", poster_array[i]).fadeIn(200);
});
i++;
if (i == 4) {
i = 0;
}
}, 7000);
});
Related
I've checked out the other threads about this, but couldn't really find what I'm after.
I've embedded a YouTube video in iFrame form. It's set to autoloop. Here's the parameters:
?showinfo=0&rel=0&autoplay=1&loop=1&controls=0&playlist=SeFzUzde5BM
The problem is that before the video starts, there's a black screen with a loading bar. That in itself isn't too bad, but then when the video goes to loop, it does that again! Why does it need to load itself twice? Is there anyway to have it seamlessly loop, without the loading screen breaking up each loop?
Your question seems to be answered here:
YouTube embedded video auto loop without refresh screen
However if that link becomes un-available the answer is using a Youtube Embed Api code. called player.getPlayerState() .You basically check that the video has "ended" and then run the .playVideo(); function. which starts it again immediately.
Youtube API : focused on Playback Status
I added this 'if' statement to the code provided at the top of the Youtube API page.
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
NOTE: As you can see you have to set it up as a separate script first instead of running it in-line in the html (it's easier to keep track of too). I suggest looking at the YouTube API linked above for extra help.
Jimmy's solution looks good. I ended up using an HTML video player, but if anyone is curious, this is the solution that was working for me when I was using the iframe.
I had to know the time of the video (15s) and set it to loop .1s before that (14.9s). Otherwise, there'd be a little "blip" effect. I used an interval to constantly check the time. If there's a way to dynamically hook into the 0.1s spot before video end, I'd recommend that, but I couldn't find that. I also use a little fade effect so the transition is smoother.
<div id="player"></div>
<script>
// 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: YOUR_ID_HERE,
playerVars: {
controls: 0,
showinfo:0,
rel:0,
},
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
var interval_is_stopped = false;
setInterval(function (){
var current_time = event.target.getCurrentTime();
if (current_time > 14.9 && !interval_is_stopped) {
interval_is_stopped = true;
jQuery('#player').fadeTo(400, 0.7, function(){
player.seekTo(0);
jQuery(this).fadeTo(400, 1, function(){
interval_is_stopped = false;
});
});
}
}, 10);
}
</script>
How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.
According to this site, this is supported in the playbackRate and defaultPlaybackRate attributes, accessible via the DOM. Example:
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;
The above works on Chrome 43+, Firefox 20+, IE 9+, Edge 12+.
Just type
document.querySelector('video').playbackRate = 1.25;
in JS console of your modern browser.
(Tested in Chrome while playing videos on YouTube, but should work anywhere--especially useful for speeding up online training videos).
For anyone wanting to add these as "bookmarklets" (bookmarks containing JavaScript code instead of URLs) to your browser, use these browser bookmark names and URLs, and add each of the following bookmarks to the top of your browser. When copying the "URL" portion of each bookmark below, copy the entire multi-line code block, new-lines and all, into the "URL" field of your bookmark creation tool in your browser.
Name: 0.5x
URL:
javascript:
document.querySelector('video').playbackRate = 0.5;
Name: 1.0x
URL:
javascript:
document.querySelector('video').playbackRate = 1.0;
Name: 1.5x
URL:
javascript:
document.querySelector('video').playbackRate = 1.5;
Name: 2.0x
URL:
javascript:
document.querySelector('video').playbackRate = 2.0;
Here are all of my playback-speed bookmarklets:
I added all of the above playback speed bookmarklets, and more, into a folder named 1.00x on my bookmark bar, as shown here:
References:
The main answer by Jeremy Visser
Copied from my GitHub gist here: https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
Get other bookmarklets here too, such as for aiding you on GitHub.
I prefer having a more fine tuned approach for video speed. I like being able to speed up and slow down the video on command. Thus I use this:
window.addEventListener("keypress", function(e) {
if(e.key==="d") document.getElementsByTagName("video")[0].playbackRate += .1; else if(e.key==="s") document.getElementsByTagName("video")[0].playbackRate -= .1;
}, false);
Press d to speed up, s to slow down.
You can use this code:
var vid = document.getElementById("video1");
function slowPlaySpeed() {
vid.playbackRate = 0.5;
}
function normalPlaySpeed() {
vid.playbackRate = 1;
}
function fastPlaySpeed() {
vid.playbackRate = 2;
}
In chrome, create a new bookmark
Enter an arbitarary name for example speed selector then Enter the following code in the URL
javascript:
var speed = prompt("Please enter speed", "1");
document.querySelector('video').playbackRate = speed,void(0);
then when you click on this bookmark, a popup window appears then you can enter the speed of video
solutions
dom event onloadstart="this.playbackRate = 1.5;"
<video
onloadstart="this.playbackRate = 1.5;"
controls
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
js video.volume = 0.5;
<video
id="custom-video"
controls
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
const video = document.querySelector('#custom-video');
if(video) {
video.playbackRate = 1.5;
}
demo
https://codepen.io/xgqfrms/pen/bGLOrjM
javascript:document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 0.1;
you can put any number here just don't go to far so you don't overun your computer.
suppose that your video/audio id is myVideo, then you can simply use JavaScript for doing that you wanna do, By just typing the following simple JS code:-
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;`
That will decrease the speed of your video/audio to it's half speed.
playbackspeed
Indicates the current playback speed of the audio/video.
Example values:
1.0 is normal speed
0.5 is half speed (slower)
2.0 is double speed (faster)
-1.0 is backwards, normal speed
-0.5 is backwards, half speed
source: w3schools.com
Firefox has a speed control context menu when you right-click
.
It works always you can try this
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;
If there are multiple videos on the page, most of other answers will only change the first one.
javascript:document.querySelectorAll('video').forEach( (vid) => vid.playbackRate = 1.5 );
^^ this bookmarklet will speed up all videos on the open page.
Just type the following command in the javascript console of your browser:
document.querySelector('video').playbackRate = 2.0;
You can get it by choosing the inspect option from the right-click menu as follows:
I'm trying to find an event for when an HTML video changes it's source. I'm using mediaelement.js as my skin but I couldn't find any extra events that it had.
All of my searches just turns up instructions on how to change the source, not detect if the source was changed.
I'm hoping I can just do something like
.addEventListener('sourceChange', function (e) { })
but I can't seem to find if there's an actual event.
Thanks!
You can use loadedmetadata, loadeddata as well as canplay events to find out if a source has loaded and can be played. The event contains reference to the source video element in question and from there you can check if the url has changed compared to the previous one.
Example (proof of concept)
var cUrl = v.src; // current url
v.onloadedmetadata = function() {
if (this.src !== cUrl) {
i.innerHTML = "<b>Source changed!</b>";
cUrl = this.src; // update, etc..
}
else {
i.innerHTML = "Source is playing... (changes source in 5 sec.)";
setTimeout(function() {
i.innerHTML = "Loading new source...";
v.src = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_30mb.mp4";
}, 5000);
}
};
<div id=i>Loading video, please wait...</div><br>
<video id=v autoplay muted controls
src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4"></video>
Can you not use "loadeddata" event as specified here http://www.mediaelementjs.com/#api
I want to autoplay an HTML5 video only after it loads. I would also like to have a progress bar (GIF or CSS) while it loads. Any help?
Not sure whether or not you want it to play only after the page loads, or after the video itself has finished buffering.
If you want it to play automatically upon the page loading you would want to use the tag's "autoplay" attribute.
Example
<video controls autoplay> </video>
For easy to understand information on how to make some rather cool looking loading bars in CCS3, see here. CSS-tricks always has some interesting stuff.
UPDATE 2 Hey so this answer is a specific work around for this scenario (only a 12sec. video for a slow connection wanting to be played back smoothly) nonetheless this should fill your needs:
$(document).ready(function() {
_V_("example_video_1").ready(function(){
var myPlayer = this;
myPlayer.on("progress", out_started);
});
});
function out_started(){
myPlayer =this;
var myTextArea = document.getElementById('buffered');
bufferedTimeRange=myPlayer.buffered();
if ( (bufferedTimeRange.start(0)==0 ) && ( bufferedTimeRange.end(0) - bufferedTimeRange.start(0) > 10 ) ){
myPlayer.play();
}
}
So some things, bufferedTimeRange can be more then one single rnge of time (but with only 12 sec. of video odds are only one as docs say only 1 ussualy ) .. but not guaranteed . None the less here's a link demoing it http://ec2-23-20-36-210.compute-1.amazonaws.com/video-js.html Hopeully this helps! also if 10 second of buffered video is not enough you can change the 10 to a 12 in the if statement
Original Answer
I am not sure why you would want to do this ... but video.js does make it possible
if you have a video element called example_video_1 you can write a javscript that look's like this (not this is if you choose to use video.js which again I recomend set up is easy see http://www.videojs.com/ for an example and get started to actually set it up)
VideoJS("example_video_1").ready(function(){
var myPlayer = this;
var howMuchIsDownloaded = myPlayer.bufferedPercent();
if(howMuchIsDownloaded == 1){
myPlayer.play(); //start playing the video
}else{
setTimeout(arguments.callee, 100);
}
});
Update it appears the API call layed out above is presently broken for Video.js (bug has been reported) Here is an example to tell when a video has finished being buffered if your video tag id is "example_video_1"
$(document).ready(function() {
_V_("example_video_1").ready(function(){
var myPlayer = this;
myPlayer.on("loadedalldata", Done_download);
});
});
function Done_download(){
myPlayer =this;
var myTextArea = document.getElementById('buffered');
alert("The video has been fully buffered ");
myPlayer.off("loadedalldata", Done_download);
}
Note there seem's to be an internal mechanism in Video.js that will not allow an entire video stream to be buffered before playback has reached with a certain range of the video (at least with an .mp4 source)
#DONSA you can check out this strange behavior here video-js sample page ... ill keep it up for a couple day's on my test server
I have a cleaner example, also using video.js:
function progress(){
video = this;
if (video.bufferedPercent() > .95 && video.paused()) {
video.play();
}
}
$(document).ready(function() {
_V_("video").ready(function(){
this.on("progress", progress);
});
});
and
<video src="mcd.mp4" id="video">
I have a video tag, that I dynamically change its source as I am letting the user to choose from a number of videos from the database. The problem is that when I change the src attribute the video doesn't load even if I tell it to.
Here is my code:
$("#video").attr('src', 'my_video_'+value+'.ogg');
$("#video").load();
while($("#video").readyState !== 4) {
console.log("Video is not ready");
};
The code still stays in a infinite loop.
Any help?
EDIT:
To Ian Devlin:
//add an listener on loaded metadata
v.addEventListener('loadeddata', function() {
console.log("Loaded the video's data!");
console.log("Video Source: "+ $('#video').attr('src'));
console.log("Video Duration: "+ $('#video').duration);
}, false);
Ok this is the code I have now. The source prints great, but I still can't get the duration :/
You don't really need jQuery for this as there is a Media API that provides you with all you need.
var video = document.getElementById('myVideo');
video.src = 'my_video_' + value + '.ogg';
video.load();
The Media API also contains a load() method which: "Causes the element to reset and start selecting and loading a new media resource from scratch."
(Ogg isn't the best format to use, as it's only supported by a limited number of browsers. I'd suggest using WebM and MP4 to cover all major browsers - you can use the canPlayType() function to decide on which one to play).
You can then wait for either the loadedmetadata or loadeddata (depending on what you want) events to fire:
video.addEventListener('loadeddata', function() {
// Video is loaded and can be played
}, false);
In response to the final part of your question, which is still unanswered... When you write $('#video').duration, you're asking for the duration property of the jQuery collection object, which doesn't exist. The native DOM video element does have the duration. You can get that in a few ways.
Here's one:
// get the native element directly
document.getElementById('video').duration
Here's another:
// get it out of the jQuery object
$('#video').get(0).duration
And another:
// use the event object
v.bind('loadeddata', function(e) {
console.log(e.target.duration);
});
you can use preload="none" in the attribute of video tag so the video will be displayed only when user clicks on play button.
<video preload="none">
call function on load:
<video onload="doWhatYouNeedTo()" src="demo.mp4" id="video">
get video duration
var video = document.getElementById("video");
var duration = video.duration;