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);
});
Related
I am working on an academic project in which I am making a PHP project that is similar to a website https://promo.com/. This website edit videos by embedding overlay text effects on them. I made a website in which there is an overlay canvas section over the video section and I can take screenshots of canvas animation on video and then these screenshots of "Text animation" are merged as a gif and then I combine the gif and video (all this is done by FFmpeg);and the final product is a video having an overlay text animation. I take screenshots by using the code :
var canvas = document.getElementById("canvas");
var png = canvas.toDataURL("image/png");
But if the video size is 10 mins long then I have to wait for almost 10 mins so that this code in setInterval can take screenshots after every 50ms. Is that there is some library to accomplish this screenshot taking task of canvas animation so that the screenshots of text animation can be captured without playing them from start to end? I don't know what trick the promo.com website is using to record overlay text on video!
I want that I can record canvas animation as array of images without playing the whole canvas animation. Please help me in this. Thanks in advance.
Instead of first creating a canvas and then extracting images from it, You should use the video element directly. I am saying this because seeking from canvas is not in your hand, but seeking from video is. Use javascript along with setinterval both to seek the video forward 50 milisecond and capture the video's thumbnail in each milisecond, this just reduced your time by 5000 times! Here is an example:
// global or parent scope of handlers
var video = document.getElementById("video"); // added for clarity: this is needed
var i = 0;
video.addEventListener('loadeddata', function() {
this.currentTime = i;
});
video.addEventListener('seeked', function() {
// now video has seeked and current frames will show
// at the time as we expect
generateThumbnail(i);
// when frame is captured, increase here by 5 seconds
i += 5;
// if we are not past end, seek to next interval
if (i <= this.duration) {
// this will trigger another seeked event
this.currentTime = i;
}
else {
// Done!, next action
}
});
Otherwise, if it is absolutely necessary to add a canvas before, then you should create another video tag with the same source link, and hide it using css. Then you will create a javascript function which will seek it to every 5th second programmatically and keep saving the thumbnails and adding them in your container. This way, your thumbnails will be generated for the whole video without loading the whole video.
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 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 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);