I am using Wistia for video hosting and the wistia player for playing the video in my website. I need to detect video player events like 'pause' and 'end' and play another video based on some criteria.
The following code changes the video being played when the video is paused. This code works perfectly on Chrome and Safari. But in Firefox (Ver 29), the video is played through the flash plugin and the video player events like 'pause', 'end' are not generated.
<script>
var firstVideoId = "993554ba94",
var secondVideoId = "9dc0dc7d3a";
firstVideo = Wistia.embed( firstVideoId , {
container: "video_container",
playerPreference: "html5"
});
firstVideo.bind('pause',function(){
// Play next video.
changeVideo();
});
firstVideo.play();
function changeVideo() {
// Remove first video and play the second.
firstVideo.remove();
secondVideo = Wistia.embed( secondVideoId , {
container: "video_container",
playerPreference: "html5",
autoPlay: true
});
secondVideo.bind('pause',function() {
changeBack();
});
}
function changeBack() {
// Remove second video and play the first
secondVideo.remove();
firstVideo = Wistia.embed( firstVideoId , {
container: "video_container",
playerPreference: "html5",
autoPlay: true
});
firstVideo.bind('pause',function() {
changeVideo();
});
firstVideo.play();
}
</script>
Here are my questions:
How to play the video as HTML5 in Firefox (playerPreference is not helping).
Is there a way to capture the events when the flash plugin is used to play the video.
Related
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);
});
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;
I'm using popcorn.js with Vimeo. I would like to play my Vimeo video programmatically, but I can't seem to get the basic play() method to work for Vimeo videos.
The example code from popcorn.js.org doesn't work for me. The video does not "play right away."
document.addEventListener("DOMContentLoaded", function () {
var example = Popcorn.vimeo(
'#video',
'http://player.vimeo.com/video/25107077');
// add a footnote at 2 seconds, and remove it at 6 seconds
example.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
example.play();
}, false);
Move example.play() into an appropriate listener. This should work:
example.listen( 'canplaythrough', function() {
example.play();
});
How can I insert ads on html5 video tag before the main video plays? Is there any open source tools to make this easier? Is there any reference that can guide me there?
It is working with this code:
<script type="text/javascript">
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src="../main.webm";
myVideo.load();
myVideo.play();
}
// function adds listener function to ended event -->
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended',myNewSrc,false);
}
</script>
but I can't when it play the second one. It shows the poster. How do I get rid of the poster?
This is a quick off the cuff start of a solution that should at least point you in the right direction. This gives you a singleton with an init method that when called sets up a preroll on a particular video element.
var adManager = function () {
var vid = document.getElementById("myVid"),
adSrc = "videos/epic_rap_battles_of_history_16_adolf_hitler_vs_darth_vader_2_1280x720.mp4",
src;
var adEnded = function () {
vid.removeEventListener("ended", adEnded, false);
vid.src = src;
vid.load();
vid.play();
};
return {
init: function () {
src = vid.src;
vid.src = adSrc;
vid.load();
vid.addEventListener("ended", adEnded, false);
}
};
}();
There are a number of things that aren't covered here, though. For instance, if you set the init method to be called when you start playing the video, you'll need to keep a flag that indicates whether there's an ad playing so that the play handler won't do anything when you're transitioning from the ad to the content (which requires a "play" event after the load() call in order to get the seamless playback).
We use something similar in our video playing project, and most of the video ad services out there do something like this for HTML based video playback (as opposed to Flash video playback).
It's relatively straightforward, but you just have to make sure to keep track of when event callbacks should be fired and when to add and remove those callbacks.
Another thing to consider is the unreliability of the "ended" event. I haven't yet figured out when and on which platforms it consistently fires, but it's a fairly well known problem. A possible solution is to use "timeupdate" instead and test whether the "currentTime" property is somewhere around a second less than the "duration" property so you know you're right at the end of the video.
Sorry I can't test this code right now but in theory this should work.
<script>
// you will want to do checking here to see if the browser supports the video element
document.getElementById('video').addEventListener('ended', function()
{
// the ad finished playing so update the src attribute to the real video
document.getElementById('video').src = 'mainvideo.webm';
});
</script>
<video id="video" src="ad.webm">
</video>
You may want to look at what Popcorn.js can do. It allows you to interact with Html5 video and overlay text and a lot of other cool things:
http://popcornjs.org/documentation
#natlee75 For me this didn't work
I changed It to this:
$( document ).ready(function() {
var adManager = function () {
var vid = document.getElementById("vid1564730217"),
adSrc = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4",
src;
var adEnded = function () {
vid.removeEventListener("ended", adEnded, false);
vid.src = src;
vid.load();
vid.play();
};
return {
init: function () {
src = vid.src;
vid.src = adSrc;
vid.load();
vid.addEventListener("ended", adEnded, false);
}
};
}().init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="vid1564730217" src="http://techslides.com/demos/sample-videos/small.mp4" width="100%" style="max-height:600px;" poster="http://orperry.com/sample/wp-content/uploads/2015/12/sample-logo.png" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Have you ever watched a video online and seen a banner ad displayed on
top of the video? Or watched a video and seen an ad appear halfway
through? How about a rich media ad take over the screen when using a
mobile app?
This question was asked 8 years ago, Things have changed over the years and now we have protocols like VAST, VPAID, VMAP, and MRAID.
Read about them here.