I need some code or login using which I can solve my issue.
I can design HTML5 video player but issue is plying second Ad video. What I need is:
User will click on any video from listing. HTML5 video player will start playing it. When user will reach at middle of the video, That first video will be pause and Second Ad video will start playing. And once ad video will be completed, Player will keep continue with first video.
It must work with safari.
You can catch the middle of the video by currentTime and duration of HTML property.
And you can pause video by pause function and play ad video by using another video DOM.
var delta = 0.05;
setInterval(function(){
if(video.currentTime >= video.duration*(0.5-delta)
&& video.currentTime <= video.duration*(0.5+delta)) {
video.pause(); //pause current video
//play ad and resume video when ad end
}
}, 1000);
Related
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...
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 have a single video on a website that automatically plays when it scrolls into the viewport and pauses when it leaves the viewport. The video is muted so that it also works on mobile.
I'm using the Vimeo API to play and pause the video, and some JS to detect, on both load and when scrolling, whether the video is within the viewport.
This all works great, except that the user has the option to manually pause the video via the usual Vimeo playbar, as well as turn up the volume (the video's music soundtrack isn't essential for watching it, but some users might want to hear it).
The problem is that if the user manually pauses the video, and then starts scrolling, the script detects that the video is in viewport and starts playing it again, at least until the video has left the viewport.
This is not desirable, and it's especially undesirable if the user has turned up the volume and then paused the video, because now suddenly they will hear the video playing as they start scrolling down.
Is there a way to detect whether a user has interacted with the Vimeo player (to pause it) vs. when it's automatically paused from scrolling out of the viewport? I didn't see it when looking through the Vimeo API documentation (https://github.com/vimeo/player.js).
If that's possible, then I would simply add a conditional statement that says not to play the video when scrolled within viewport if it's currently paused by the user.
Or perhaps there's some other way to address? The only other requirement is that the solution be pure/vanilla JS.
Current code:
<div id="video-box">
<iframe id="i_video" src="https://player.vimeo.com/video/123456789?loop=1&muted=1&title=0&byline=0&portrait=0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="530" height="298" frameborder="0"></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
function vimeoPlay(){
player.play()
};
function vimeoPause(){
player.pause()
};
var dv = document.getElementById('video-box');
var v = document.getElementById('i_video');
function isAnyPartOfElementInViewport(dv) {
const rect = dv.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView);
}
document.addEventListener("DOMContentLoaded", function(event) {
if (isAnyPartOfElementInViewport(dv)) {
vimeoPlay();
}
else {
vimeoPause();
}
}, false);
window.addEventListener('scroll', function (event) {
if (isAnyPartOfElementInViewport(dv)) {
vimeoPlay();
}
else {
vimeoPause();
}
}, false);
</script>
11/15/18 Edited to Add:
Inside if
(isAnyPartOfElementInViewport(dv)) {,
there is currently just
vimeoPlay(),
which means when in the viewport, no matter whether the user manually clicked pause on the Vimeo player, as soon as they start scrolling the video will play again.
What would you suggest for an inner conditional statement to place around vimeoPlay() such that it only plays if the user hasn't manually paused the player?
I can't just check to see if the video is paused using the API's getPaused() because I don't believe that distinguishes between whether it was paused automatically due to it being out of viewport or manually by clicking the pause button.
I guess if there were a way to ask "was this video paused while in viewport" and then only play the video if that condition is NOT true, that might help, but I'm not sure how to write that.
Here is the solution,
When User is paused the video, as per the Vimeo github docs
When a video is paused by User!.
Solution: Add this to your JS file
player.on('pause', function() {
console.log('paused the User!');
});
When a video is paused by scrolling
Solution:
window.addEventListener('scroll', function(event) {
if (isAnyPartOfElementInViewport(dv)) {
vimeoPlay();
} else {
console.log('paused by scrolling');
vimeoPause();
}
}, false);
Update: Attached Updated fiddler
Here is the working jsFiddle
Hope this helps!
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);
});