I am trying to make a playlist using the HTML5 <video> tag and the onended trigger.
The playlist works, videos get played one after another, but the problem is that there is a minor gap between 2 videos played.
Its not a seamless continuous play. What can I do to fix this problem?
Here is my code:
<video id="vd" style=" width: 480px; height: 360px; " autoplay controls
src="vid/0006v.mp4" />
<script type="text/javascript">
var vf=[ "0006v", "0007v", "0008v", "0009v", "0010v" ];
var c=0;
v=document.getElementById("vd");
v.onended=function()
{
++c;
if( c >= vf.length ){ c=0; }
v.src= "vid/"+ vf[c]+ ".mp4";
};
</script>
Below is the player demo.
Each video is of 1 minute duration, about 5 loaded in the playlist.
The gap appears when video number one ends after 1 minute and second video starts, and so on...
http://13pp.co.uk/play.php
This happens because the next video only starts downloading when the previous video ends. Here's my solution:
Have two <video> elements, one visible and one hidden. Set the src attribute of the first to the first video URL. When the first <video> element is almost done playing, set the src attribute of the second to the second video and call video2.load(), but don't start playing right away. When the first <video> element is done playing, make the first invisible, make the second visible and start playing the second. Then use the first to play the third video, the second to play the fourth, etc...
Related
So the HTML5 video has no controls. Basically I want to show a loading gif that shows over the video only when the video is loading (buffering and paused)
<video id="myvideo" width="100%"><source src="video/Good.mp4" type="video/mp4"><source src="movie.html" type="video/ogg"></video>
How about using the built-in browser animation instead of a gif.
All you have to do is set the controls to TRUE and then back to FALSE depending on the buffering state.
The best practice for me looks like this,
<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>
<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing and enjoyed by the viewer
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because I would say it looks and feels better.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>
Maybe you could use ontimeupdate instead of onplaying which would fire continuously.
As for the delay time actually not 1 but 4 seconds -to me- is the best.
I need to create some hidden audio player that start playing when you pass the mouse on them in a website page. But you must not see the audio player or the div, maybe with display none.
(Optional question, the important one is the first! When i open the page it should start a sound that will be interrupt by the other sounds on mouseover. Is it possible to make the first sound continue from when it stopped??)
Use a div with opacity: 0 with an onmouseover function. Remember to add a height and width to the div so the onmouseover event will only affect a certain area.
<div style="opacity: 0;" id = "player" onmouseover = "play()" ></div>
Javascript:
var audio = new Audio("filename");
function play(){
audio.play();
}
//for pausing
//to play from where it left off, use the play method again
function pause(){
audio.pause();
}
I have an undetermined amount of very short videos that I would like to loop through.
I have the following HTML:
<video class="bgvid bgvid--0 bgvid--visible" poster="<?= URL ;?>img/vidframe.jpg" src="1920x800.webm" playsinline muted></video>
<video class="bgvid bgvid--1 bgvid--hidden" poster="<?= URL ;?>img/vidframe.jpg" src="1920x800.2.webm" playsinline muted></video>
<video class="bgvid bgvid--2 bgvid--hidden" poster="<?= URL ;?>img/vidframe.jpg" src="1920x800.2.webm" playsinline muted></video>
In my CSS I show the one video with class bgvid--visible, and hide all others with class bgvid--hidden as follows:
.bgvid--hidden { opacity: 0; }
.bgvid--visible { opacity: 1; }
In my JS I start playback of my initial video by doing the following:
$('.bgvid--0').get(0).play();
Then after 5 seconds using CSS transitions and by switching the bgvid--visible and bgvid--hidden classes I "fade out" the current "active" video, and start playback and "fade in" the following video as follows:
setTimeout(function(){
$('.bgvid--0').removeClass('bgvid--visible').addClass('bgvid--hidden');
}, 5000);
setTimeout(function(){
$('.bgvid--1').get(0).play();
$('.bgvid--1').removeClass('bgvid--hidden').addClass('bgvid--visible');
}, 4500);
Notice the second timeout being slightly shorter than the first in order to create the impression of a seamless transition by fading in the next video prior to fading out the active one.
I have read about "ended" events, but the transition has to start before the video has ended. How can I turn this into a loop of some kind that loops this way through an undetermined amount of videos?
You can get the length of your video using videoElement.duration, and the current time with videoElement.currentTime.
You can use the HTML Audio/Video timeupdate event to monitor if the current time reached the last 5 seconds, and then start the transition to the next video.
videoElement.ontimeupdate = function() {
if (videoElement.currentTime >= videoElement.duration - 5) {
startTransition();
}
};
You could use only the duration, and simply set your timeout accordingly, but nothing guarantees that a 30 seconds video will really end 30 seconds later. It can be paused, or it can buffer for some time. But this method will tell you when the video is really 5 seconds from the end.
I have an embedded video on a page. When I click on the play icon it opens on JW player. Can protractor be used to test play, pause and audio functions of the video?
Any suggestions?
Since it is a flash player, you can not run assertions on the DOM elements. You can, however, use the player API for assertions:
it('it should be possible to play video', function () {
//play is initially at position 0
expect(browser.executeScript('jwplayer().getPosition()')).toBe(0);
$('video-container').click(); //clicks on the middle of the container div starts the diveo
browser.sleep(2000);
$('video-container').click(); //clicks on the middle of the container div stops the diveo
//play has moved its position
expect(browser.executeScript('jwplayer().getPosition()')).toBeGreaterThan(0);
});
I need to add a overlay of rectangular shape to an object (eg. water bottle) in my html5 video, and then track the object throughout the video.
I already have a txt file which contains the object's positions for each frame throughout the video. So I need to:
draw the rectangular shape on each frame of the html5 video. so when the video is being played, we can see the tracking box moving with the object
the tracking box's movement should be synchronised with the video. so when the user click 'pause', the tracking will pause too.
I just need some general advice on how to approach this problem. Is there javascript package that can draw shapes on videos?
1) With HTML5 video, you can't tell what 'frame' the video is on. Only what the current position is in the video in seconds (i.e. 5.4423 seconds, it can be quite specific). If you know how many frames per second your video has (and it's constant) you can reasonably estimate what frame you are on by multiplying frames by current seconds. Simply use videoElement.currentTime to get the elapsed playback time.
To get the current seconds data throughout playback, use the setInterval function and run it every 40 milliseconds (assuming you have a 25 fps video)
2) In you setInterval callback grab the relevant box position from your data file (based on the elapsed seconds/frames) and update the x and y position of the box using javascript (e.g. element.style.left = x + "px"
The box will stop on pause because the elapsed seconds will stop too. Hint: make the box position absolute and the element containing the video position relative, and the box will move relative to the top left corner of the video.
Hope that helps!
Edit: lay out your html like this:
<div id="videoContainer">
<div id="box"></div>
<video id="videoElement" controls>
<source src="myVideo.mp4 type="video/mp4" />
</video>
</div>
And your CSS:
#videoContainer {
position: relative;
}
#box {
width: 100px;
height: 50px;
background: red;
position: absolute;
left: 0;
top: 0;
}