Javascript Play Video on Mouse Hover (Multiple Videos) - javascript

I have the following JavaScript code that work great when I hover over a video. I like how the start and stop is broken into functions and it allows me to customize the hover play exactly how I want. However, this code only works on the first video on the page and I have several videos that are loaded on the page dynamically.
I would like to modify this code so that it will work on all videos on the page. I'm thinking that maybe the functions need to be called inside a loop? I'm not sure as I do not know JavaScript well, so any help on how to modify this code would would be much appreciated!
const video = document.querySelector("video");
function startPreview() {
video.muted = true;
video.currentTime = 5;
video.playbackRate = 2.5;
video.play();
}
function stopPreview() {
video.currentTime = 5;
video.playbackRate = 1;
video.pause();
}
let previewTimeout = null;
video.addEventListener("mouseenter", () => {
startPreview();
previewTimeout = setTimeout(stopPreview, 3000);
});
video.addEventListener("mouseleave", () => {
clearTimeout(previewTimeout);
previewTimeout = null;
stopPreview();
});

You can do event delegation to handle all videos. So:
document.body.addEventListener('mouseenter', (event) => {
if (event.target.matches('video') {
// start playing
}
});
More on the matches() method on MDN.
You would also modify the start and stop methods to take the video element as a parameter:
function startPreview(video) {
video.muted = true;
video.currentTime = 5;
video.playbackRate = 2.5;
video.play();
}
And pass them the event.target.

Related

How do I get video to play and pause with a mouse over and blur set with getElementsByTagName

I am working on my portfolio site to make it more ADA compliant when I noticed a lot of redundant code that I want to optimize. I have seven videos on the screen and each have a onmouseover and onmouseout event attributes. I wanted to create a JavaScript that just assigned these event handlers to all video tags on the screen in one function run on startup.
This worked using html code
<video class="nlm-marque-video" id="aerialVideo">
<source src="videos/aerial-view-of-san-diego.mp4"
onmouseover = "playVid(this);"
onmouseout ="pauseVid(this);"
type="video/mp4">
</video>
<script>
/*
* get reference of all video tags on page
* set the video attributes to same defaults
* start videos automatically the first time with muted
*/
function videoEnhance(){
let vid = document.getElementsByTagName("video");
for (i=0;i<vid.length; i++) {
vid[i].autoplay = true;
vid[i].muted = true;
vid[i].controls = true;
vid[i].addEventListener("onmouseover", playVid(this));
vid[i].addEventListener("onmouseout", pauseVid(this));
}
}
/*
* function to play video event
*/
function playVid(vidObj) {
vidObj.play();
console.log("video is playing");
}
/*
* function to pause video on event
*/
function pauseVid(vidObj) {
vidObj.pause();
console.log("video is paused");
}
</script>
index.php:346 Uncaught TypeError: vidObj.play is not a function
at playVid (index.php:346)
at videoEnhance (index.php:338)
at onload (index.php:24)
playVid # index.php:346
videoEnhance # index.php:338
onload # index.php:24
The videos runs, but do not respond to the mouseover and mouseout events.
I think that your simplest solution would probably be to just use the event to play and pause things.
function videoEnhance(){
let vid = document.getElementsByTagName("video");
for (i=0;i<vid.length; i++) {
vid[i].autoplay = true;
vid[i].muted = true;
vid[i].controls = true;
vid[i].addEventListener("mouseover", playVid); //Don't pass in param here.
vid[i].addEventListener("mouseout", pauseVid); //Or here
}
function playVid(e) {
e.target.play(); //use the event
console.log("video is playing");
}
function pauseVid(e) {
e.target.pause(); //use the event
console.log("video is paused");
}
}

A-Frame - playing / pausing sound with a custom ('a-sound') source

Edit 2: Here is the working code. Many thanks to Piotr for his help I couldn't have done it so effortlessly without you guys.
sceneEl.querySelector('a-sound').setAttribute('sound', {src:url3});
let playing = false;
var el = document.querySelector('a-box');
let audioEl = document.querySelector("a-sound");
var audio = audioEl.components.sound;
el.addEventListener('click', () => {
if (!playing) {
audio.playSound();
} else {
audio.stopSound();
}
playing = !playing;
})
} );
request.send( null );
}
});
Edit: I've got the sound playing from a dynamic URL (in my JSON file), but I cant seem to get the event listener function right (for playing / pausing on click).
sceneEl.querySelector('a-sound').setAttribute('sound', {src:url3});
let audioEl = document.querySelector("a-sound");
let audio = audioEl.components.sound;
sceneEl.querySelector('a-box').addEventListener('click', function () {
if(!playing) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
playing = !playing;
});
} );
request.send( null );
}
});
Original: I'm using this component in A-Frame, but I'm looking to play the sound from the src in the ('a-sound') entity rather than from the asset link. The reason is because I'm loading the sound files dynamically from a JSON array so they don't exist in any list of assets. I've got all my files loading but am having trouble getting this component to hook into my loaded sceneEl.querySelector('a-sound').setAttribute('sound', {src:url3}); code. I'm thinking its just a small syntax issue but I'm not 100% sure. Could someone please look over this for a minute and tell me if its doable? This is the code (same as the link except for the (a-sound) within the querySelector.
AFRAME.registerComponent('audiohandler', {
init:function() {
let playing = false;
let audio = document.querySelector('a-sound');
this.el.addEventListener('click', () => {
if(!playing) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
playing = !playing;
});
}
})
</script>
Using the <a-sound> You must handle things a bit differently.
playing / stopping the sound should be done within the sound component. You need to access it via yourEntityName.components.sound and use the playSound() and stopSound() methods.
check it out on my glitch. I set the source via the setAttribute(), and make a play / stop button.
My <a-sound> has a geometry to be a button, but You can make a <a-sound> entity, and use it like this:
let audioEl = document.querySelector("a-sound");
audioEl.setAttribute("src", "sourceURL");
let audio = audioEl.components.sound;
// play = audio.playSound();
// stop = audio.stopSound():
Furthermore, there are many issues with the nodes not being fully loaded. Check out this example:
<a-entity component></a-entity>
<a-sound></a-sound>
If the component tries to grab a reference to the document.querySelector("a-sound").components.sound, it may be undefined. If so, You should try to wait until it emits the loaded signal.

How to pause a video after a certain time? video.js

I've been messing with video.js whilst learning javascript but can't seem to figure out how to make the video pause after a certain time has passed.
myPlayer.play(function(){
whereYouAt = myPlayer.currentTime();
if (whereYouAt == 10) {
myPlayer.pause();
}
})
That is my pause code.
Check the currentTime in the timeupdate event callback:
var pausetime = 2; // stop at 2 seconds
var myPlayer = videojs('example_video_1');
myPlayer.on('timeupdate', function(e) {
if (myPlayer.currentTime() >= pausetime) {
myPlayer.pause();
}
});
myPlayer.play();
JSFiddle demo: http://jsfiddle.net/EdjxN/17/

What HTML5 video event refers to the currentTime of the video being played?

I want the user to have the option to skip the preroll ad after a specified time (say 5 secs into the ad). Then the normal video would play. How can I achieve this? Currently I have something inline of this:
var adManager = function () {
var adSrc = url,
src = "http://media.w3.org/2010/05/sintel/trailer.mp4";
var adEnded = function () {
videoPlayer.removeEventListener("ended", adEnded, false);
videoPlayer.removeEventListener("playing", adPlaying, false);
$("#companionad").hide();
videoPlayer.src = src;
videoPlayer.load();
videoPlayer.play();
console.log(videoPlayer.currentTime);
};
var adPlaying = function () {
var companionad = $(responseXML).find("HTMLResource").text();
$("#companionad").html(companionad);
console.log(videoPlayer.currentTime);
}
return {
init: function () {
videoPlayer.src = adSrc;
videoPlayer.load();
videoPlayer.addEventListener("ended", adEnded, false);
videoPlayer.addEventListener("playing", adPlaying, false);
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
console.log(videoPlayer.currentTime);
}
};
}();
adManager.init();
What I am trying to do is:
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
show the skip button and continue to normal video. Is there any event that is continually fired as the video play progresses?
Do your check against the media.currentTime property in a handler for the timeupdate event. See documentation:
The timeupdate event is fired when the time indicated by the
currentTime attribute has been updated.
Just as an aside, this HTML5 video demo page is a really handy reference for playing around with the various properties and events available to you.

How to mute/unmute sound of an audio using javascript

I have created a fiddle of my function here( http://jsfiddle.net/rhy5K/10/ ) . Now i want to provide the Sound "Mute/unpute" option for users. Example if i click on "a link then sound playing like Get ready,5,4,3,2,1 should be mute and vice-versa.
I am thinking like to call a to toggle_sound function on click, but i am confuse like what should i write inside the function to mute the sound.
Please provide me a logic, or a solution for my problem.
Explanation using code example:
I want to MUTE/UnMUTE this below sound playing
var playGetReady = function (done) {
var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
playNext = function () {
var id = ids.shift();
document.getElementById(id).play();
if (ids.length) {
setTimeout(playNext, 1000);
} else {
done();
}
};
playNext();
};
Warning: This JS fiddle demo may play sound on load
Try
HTML5 Video_tag for display video with audio
or
this below example along with html5 with jquery
window.my_mute = false;
$('#my_mute_button').bind('click', function(){
$('audio,video').each(function(){
if (!my_mute ) {
if( !$(this).paused ) {
$(this).data('muted',true); //Store elements muted by the button.
$(this).pause(); // or .muted=true to keep playing muted
}
} else {
if( $(this).data('muted') ) {
$(this).data('muted',false);
$(this).play(); // or .muted=false
}
}
});
my_mute = !my_mute;
});
I think you can use:
document.getElementById(id).volume = 1;
or
document.getElementById(id).volume = 0;

Categories

Resources