i need to increment a variable each time a video has been watched (no matter which one), so i can display an ad when this variable reach 10.
Actually i bind every video using their ID.
<video id="1">...</video>
<video id="2">...</video>
<video id="3">...</video>
$('#'+idVideo).bind('ended',function(){ /* each time i append a video, i do this */
WATCHED_VIDEOS++;
// displayAd() when WATCHED_VIDEOS reach 10....
});
I tried this line $('video').bind('ended',function(){...}); instead of binding every video but it doesn't work.
Anyone has a solution to accomplish this using only one bind? Thanks
try the following:
<video id="1">...</video>
<video id="2">...</video>
<video id="3">...</video>
<script>
var total_ended = 0;
var videos = document.getElementsByTagName('video');
for (i=0;i<videos.length;i++) {
videos[i].onended = function() {
total_ended++;
console.log('Total videos ended: ' + total_ended);
}
}
</script>
and here's a working example: http://jsfiddle.net/xvLmam41/
hope that helps.
Related
I am trying to use Cordova Media Capture to play video however, it does not work.
Here is my JS:
function video() {
navigator.device.capture.captureVideo(onSuccess, onFail,
{
limit: 1,
duration: constants.MAX_DURATION_OF_VIDEO
});
function onSuccess(mediaFiles) {
console.log("MEDIA FILE");
console.log(mediaFiles);
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].localURL;
console.log(path);
$state.go('submitMoment', {picture: $sce.trustAsResourceUrl(path)});
}
};
function onFail(message) {
console.log("FAILED because: " + message);
}
};
I have tried both FullPath and localURL. I'm using localURL here because this video is being taken from the user's phone and I get an error from the browser. It is sandboxed so I cannot use a localURL coming from an external device. The device returns a video in mp4 format.
Here is how it looks when I display it on the next screen in '$state.go'
The controls appear fine but when you play the video nothing happens. It's just a white screen.
Once the video is done playing it just disappears:
Here is my HTML:
<video width="100%" height="300px" controls>
<source src="{{vm.picture}}" type="video/mp4"></source>
</video>
This is some strange behavior. Does anyone know whats going on?
Thanks.
EDIT:
Console display:
This is the error I get when I use 'fullPath' because of this I decided to use the localURL instead and I don't get the error. Also, it seems like the white screen bug isn't really a bug. If i tap it the controls show up but it is still stuck on play (The first screenshot).
In the onSucess method, store media url as
$scope.videoSrc = mediaFiles[0].fullPath;
$state.go('submitMoment', {picture: $scope.videoSrc);
Receive picture as $stateParams in your new Page.
$scope.videoUrl = $stateParams.picture;
In your HTML
<source src="{{videoUrl}}" type='video/mp4' />
In your controller inject the $stateParams dependency.
Hope this helps you.
Im trying to get video duration from my videos that i listed in a table. I tried to access it using #ViewChildren and was successful until one part. i get the query list but when i try accessing _results it returns undefined. Later I learned that queryList was private for some reason. Any help will be appreciated
Here is my code:
<video id="video1" #video>
<source src = "{{videos.link}}" type="video/mp4">
</video>
#ViewChildren('video') video;
ngOnInit: {
Observable.timer(1000,1000).subscribe(() => {
if(this.video && !this.isVideoLogged){
console.log(this.video);
this.isVideoLogged = true;
}
}
You can use the loadedmetadata event:
Plunker example
<video width="480" controls #video (loadedmetadata)="onMetadata($event, video)"
onMetadata(e, video) {
console.log('metadata: ', e);
console.log('duration: ', this.duration = video.duration);
}
I need to change the video link on click on Play button and also need to auto play the video.
<video id="video" src="dhoni.mp4" width="320" height="240" controls>
</video>
<script>
$(document).ready(function () {
var video = document.getElementById('video');
video.onplay = function (e) {
$('video').attr({'src': 'ran.mp4'});
$('video')[0].play();
};
});
</script>
Exists many kinds of solution for what you want, I made an example how you do it
The simple way is just make two videos the first become hidden when the second is playing.
The other way is like the first but you use a image to represent the video1 when the user click in the image, so the video2 start, and you hide the image when the user click.
The others solutions like you're trying is more complicated because if you try to replace the src atribute of a video by other src exist a problem to load this, this involve ajax blob request and this will cause much issues to handle, for example when I trying to load a video that's not hosted in my server, and other things like the how the way firefox, chrome and other browsers render the video.
https://jsfiddle.net/5mek5ffd/27/
HTML
<video id="video1" src="http://techslides.com/demos/sample-videos/small.mp4" width="320" height="240" controls>
</video>
<video id="video2" class="hidden" src="https://static.videezy.com/system/resources/previews/000/004/147/original/jelly-fish.mp4" width="320" height="240" controls="">
</video>
CSS
.hidden{ display:none }
JS
function changeVideo(video1, video2){
try {
// pause the video
jQuery(video1)[0].pause();
// set the seconds to 0
jQuery(video1)[0].currentTime = 0;
// add the hidden class to the video1
jQuery(video1).addClass("hidden");
// remove the hidden class to the video2
jQuery(video2).removeClass("hidden");
// pause the video2 - it's necessary cause the video was ended
jQuery(video2)[0].pause();
// set the seconds to 0 to the video 2
jQuery(video2)[0].currentTime = 0;
} catch(e){
// if something goes wrong put the message on console
//prevent the script stop the other scripts too
console.log(e.message);
return false;
}
}
jQuery(document).ready(function($){
try {
// if exists the video1 put it on video1 variable
// if exists the video2 put it on video2 variable
var $video1 = $('#video1').length > 0 ? jQuery('#video1') : false,
$video2 = $('#video2').length > 0 ? jQuery('#video2') : false;
// if exists the video1 and video 2
if($video1 && $video2){
// if the #video1 is starting to play
$video1.on("play", function() {
console.log($video2[0].duration);
// call change video function
changeVideo("#video1","#video2");
// the [0] represents the javascript dom object
// if the seconds is 0 in my video 2 then play it
if($video2[0].currentTime == 0 )
$video2[0].play();
});
// start the video1 if the page is ready added 1 sec for delay,
// to not cause the impress wrong of the video
setTimeout(function() {
if($video2[0].currentTime == 0)
$video1[0].play();
},1000);
// if the video was ended return to the first video
$video2.on("ended", function(){
changeVideo("#video2","#video1");
});
}
} catch(e){
// if something goes wrong put the message on console
//prevent the script stop the other scripts too
console.log(e.message);
}});
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">
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.