I have the following HTML5 snippet in home-component.html:
<div id="main-tv-cabinet">
<video id="tv" autoplay preload="auto" controls
width="640" height="480"
(ended)="onTvPreviewEnded()">
<source src="{{sermonForPreview}}" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
My view model is as follows:
export class HomeComponent {
private sermonIndexForPreview : number = 0;
private sermonsForPreview : string[] = [];
public sermonForPreview = "";
constructor()
this.sermonsForPreview.push("assets/videos/previous-sermon-snippet-1.mp4");
this.sermonsForPreview.push("assets/videos/previous-sermon-snippet-2.mp4");
this.sermonForPreview= this.sermonsForPreview[0];
}
}
public onTvPreviewEnded(){
this.sermonIndexForPreview = (this.sermonIndexForPreview + 1) % 2;
this.sermonForPreview = this.sermonsForPreview[this.sermonIndexForPreview];
this.restartVideoPlayer();
console.log(this.sermonForPreview);
}
private restartVideoPlayer() {
var tvScreen: any = document.getElementById("tv");
// TO FIGURE: why is binding not working here?
tvScreen.src = this.sermonForPreview;
if (tvScreen.paused)
tvScreen.play();
else tvScreen.pause();
}
}
When the video ends playing the first one, I expect the second to play and when the second one is done, back to the first, etc. The loopback is happening but the video element is stuck with whatever video is first in the list unless I comment out the line
tvScreen.src = this.sermonForPreview;
I understand that one-way binding should reflect changes in the view model back to the view. I even tried two-way biding with the [()] syntax but that did not solve it. What did I miss?
Take a look at StackBlitz I've created.
https://stackblitz.com/edit/angular-ivy-ela9eq
Your binding was not working as you tried to set src attribute to the video tag, not the source tag.
You were combining Angular's data binding and basic JavaScript (in your restartVideoPlayer() method). You should think in declarative way and use just the binding if you can.
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.
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.
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;
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.