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();
}
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...
I'm designing a website with a video banner that, upon pressing play, opens a video using an HTML5 player on fullscreen. Here's the JavaScript that is called when the play button is pressed.
function addVideo() {
var video = $(document).find('#intro-video')[0]; // find the newly inserterd video
video.src = "../../assets/images/intro.mp4";
video.controls = false;
video.load();
video.play();
goFullscreen(video);
}
function goFullscreen(myVideo) {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
} else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
} else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
} else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
}
I'd like to put an X in the upper right hand corner of the video that, when clicked, simulates pressing the escape key or calls a JavaScript method. Can someone give me an example of that being done?
I did something similar a while ago, I ended up making a div container fullScreen instead of the video tag, and had the video at 100% width and height on that div,
then you can position other elements inside the div, just use position: absolute/relative on the container and overlayed items
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;
}