Develop Reference

Javascript Play Video on Mouse Hover (Multiple Videos)

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.

Check if a HTML5 video is playing using jquery

I've written a small jquery code to override HTML 5 play function. However, I am not able to check if a video is playing or not.
Here is my jquery code
$("video").click(function() {
var video = $("#myvideo").get(0);
video.play();
$(".play").css("display", "none");
return false;
});
$("#myvideo").bind("pause ended", function() {
$(".play").css("display", "block");
});
Just give me simple tips to show a div with class="pause"(I have CSS for it) when the video is paused and pause the video as well.

You'd use the paused property to check if the video is paused.
If it's not paused, it's playing
$("video").click(function() {
var video = $("#myvideo").get(0);
if ( video.paused ) {
video.play();
$(".play").hide();
$(".pause").show();
} else {
video.pause();
$(".play").show();
$(".pause").hide();
}
return false;
});

As Jquery is the framework of Javascript
you can use the following code (involves Video JS Frame work):
var my_video_id = videojs('video_id');
if (my_video_id.player_.paused()) {
my_video_id.player_.play();
} else {
my_video_id.player_.pause();
}

Autoplay within HTML

I am new to Javascript... like super new :X and i am writing my very first script to try and automate video episodes of my favorite anime because the videos on the site don't have a autoplay feature after you click the link. I read about Video and Var = 'My video' to try and figure out how to tell the script, when page loads video .autoplay = true...but i just get to dead ends. here is where i am at:
var urlsToLoad = [
'http://Site1/Ep1',
'http://Site1/Ep2',
'http://Site1/Ep3',
'http://Site1/Ep4'
];
if (document.readyState == "complete") {
FireTimer ();
}
window.addEventListener ("hashchange", FireTimer, false);
function FireTimer () {
setTimeout (GotoNextURL, 5000); // 5000 == 5 seconds
}
function GotoNextURL () {
var numUrls = urlsToLoad.length;
var urlIdx = urlsToLoad.indexOf (location.href);
urlIdx++;
if (urlIdx >= numUrls) urlIdx = 0;
Once the first video link starts 'Site1/EP1', i have this going:
function myFunction() {
var vid = document.getElementById("925664"); <--Ctrl+F 'Videoid' from Source
vid.autoplay = true;
vid.load();
}
but it just stays died like 'click play to start' ..
I can really use help here PLZZZ and thank you.

Something like this:
<!-- HTML Page -->
<video id="925664"></video>
// Javascript
function myFunction() {
var vid = document.getElementById("925664"); // <--Ctrl+F 'Videoid' from Source
vid.src = "path/to/file.mp4";
//vid.autoplay = true; // not really anything that's useful
vid.load();
vid.play();
}
Warning: Most mobile devices don't allow media files to play via code and require human interaction (click/touch) in order to start playback. However, on desktops this isn't a problem.

Try using the play() method instead.
function myFunction() {
var vid = document.getElementById("925664");
vid.play();
}

Need to change the display name of multiple buttons with variables

I have a video that automatically starts playing. And I have a button:
<button onclick="playPause()">Play/Pause</button>
JS:
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
And I want him to be named "Pause" when I open the page and he changes his name to "Play" when the video is paused and "Pause" when the video is being played.
I have this other button (similar to this one) that acts like this:
When the video is loaded the video window size is 480p and when I press the button "HD" it changes the video window size to 1280p and its own name to "SD" (for when I go to change back to 480p window) (user 1533609 ankit helped me here):
<button onclick="goHD(this)">HD</button>
JS:
function goHD(el) {
if (myVideo.width != 1280){
myVideo.width = 1280
el.innerHTML = "SD"
}
else{
myVideo.width = 720
el.innerHTML = "HD";
}
}
This is one is working great in my code but I don't see what I have to do to be able to do the exact same thing in the "Pause/play" button.
Any help is appreciated :)

Try
<button onclick="playPause(this)">Play/Pause</button>
And
function playPause(btn) {
if (myVideo.paused) {
myVideo.play();
btn.innerHTML = "play"
} else {
myVideo.pause();
btn.innerHTML = "pause"
}
}
See an example: https://jsfiddle.net/j82447k5/
Does it help you?

If you can use jquery, then you can change the button text easliy by using the text() function on this object which signifies the button.
If video is paused, then play it and change the text to Pause and vice verse. Updated code will be:
function playPause() {
if (myVideo.paused) {
myVideo.play();
$(this).text('Pause');
}
else{
$(this).text('Play');
myVideo.pause();
}
}
If you are using javascript only, then you can use textContent/innerText properties (browser-dependant):
Updated HTML:
<button type="button" onclick="playPause(this);">Play/Pause</button>
Updated JS:
function playPause(myBtn) {
if (myVideo.paused)
{
myVideo.play();
myBtn.innerHTML = "Pause";
}
else {
myVideo.pause();
myBtn.innerHTML = "Play";
}
}
See the fiddle: "https://jsfiddle.net/h7qb1b58/2/"

How do you play a video through JavaScript only?

I am working on an IDE based off of JavaScript. I need to figure out how to play videos using only JavaScript. I have looked online and found next to nothing.
Here's the code I have right now:
var vid = document.createElement('video');
vid.src = src;
vid.autoPlay = true;
document.body.appendChild(vid);

vid.play(); To play a video.
Link to tutorial: W3 schools
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
DEMO
EDIT: Here is how you add controls
HTML:
<button id="playPause">Pause</button>
JS:
var pp = document.getElementById('playPause');
pp.onclick = function(){
if(vid.paused){
vid.play();
pp.innerHTML = "Pause";
}else{
vid.pause();
pp.innerHTML = "Play";
}
};
DEMO2
Adding default controls
vid.controls = true;