Develop Reference

Changing the video src with JS after have page loaded does not work in Safari

I am trying to improve page speed on my site, and I have an 8mb autoplay video.
I have been looking at loading the video after the page load. I managed to get to work in chrome, firefox, etc. but not on some versions of Safari. In some versions, I just see the poster image and play button.
Here's the code:
window.addEventListener("load", () => {
console.log("load");
async function setupVideo() {
console.log('setupVideo function');
const video = document.getElementById('video');
video.src = 'video__h264_high-bitrate-2-86mb_blue_20_12.mp4';
console.log(video.src);
video.load();
video.play();
return video;
}
setTimeout(() => {
setupVideo();
}, 3000);
});
<video id="video" class="settings-video-background" loop="" muted="" autoplay="" playsinline="" poster="/airline_software_masthead-video_poster_home_2.jpg">
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>

Seems the issue was window.addEventListener("load") patchy support, the following seems to fire it.
if (document.readyState === 'complete') {
setupVideo();
} else {
window.addEventListener('load', setupVideo);
}

How can I disable HTML 5 Video Player full screen button in all kind of browsers, especially in IE, Edge & Firefox, Opera, Safari?

I tried to achieve this in chrome by doing like this..
video::-webkit-media-controls-fullscreen-button {
display: none;
}
It is sometimes not working. I need a permanent solution for this very badly.
I am requesting the people:
This is not a duplicate question for any other in SO.
That solution is not working, test it if you want.
That's why I asked this again.

You can create you own control (you have to do the styling but I think that should not be a problem).
JSFiddle
Tutorial with explanations
The HTML5:
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
Download the video instead.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="mute">Mute</button>
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
<button type="button" id="full-screen" disabled>Full-Screen</button>
</div>
</div>
And this as JavaScript.
$( document ).ready(function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButton.innerHTML = "Mute";
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
video.play();
});
// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});
});

Video thumbnail on hover play few seconds and then show thumbnail. - Javascript

function playVideo() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'none';
var starttime = 7; // start at 7 seconds
var endtime = 10; // stop at 17 seconds
var video = document.getElementById('yourVideoId');
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.pause();
}
}, false);
//suppose that video src has been already set properly
video.load();
video.play(); //must call this otherwise can't seek on some browsers, e.g. Firefox 4
try {
video.currentTime = starttime;
} catch (ex) {
//handle exceptions here
}
}
function showThumbnail() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'inherit';
}
<video id="yourVideoId" width="240" height="320" onmouseover="playVideo()" onmouseout="showThumbnail()">
<source src="assets/video/sample.mp4" type="video/mp4">
</video>
<img src="assets/images/banner.png" width="240" height="320">
this the code i have written. when on hover the video plays, but on releasing the hover the video doesn't stop and on hover the video plays and stops at the last frame and doesn't show he thumbnail after ending.

Your code doesn't feature video.pause(); in the showThumbnail() function, which would effectively stop your video. You can furthermore add video.load(); in the aforementioned function to reset it to its initial state.

Video Onclick function for playing a video

I have designed a video question using Html and i have removed controls for video using Jquery, so i need to have onclick functionality like when we click on the video it should be played and if am clicking again it should be paused .

Below your html code
<video id="video" width="1180" height="664" poster="put here your poster url" preload="auto">
<source src="put here your video url" type="video/mp4">
</video>
Below jquery code
var video = document.getElementById("video");
video.addEventListener("click", function(event) {
if (video.paused == true) {
video.play();
}
else{
video.pause();
}
});

You can play or pause a vide like this. This should be able to toggle:
$(document).ready(function(){
$('YOUR_VIDEO_ID_OR_CLASS').click(function(){
$(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
});
});

An easy way could be like this:
$(function() {
var video = $('video')[0];
$('button').click(function() {
if( video.paused ) {
video.play();
}
else {
video.pause();
}
});
});
Fiddle Example
You can change 'button' to another element as trigger for the play/pause.
You can also change it to the video it self, if you want just to click on the video to play and pause it.

This is what you need:
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
}
else
{
video.pause();
button.textContent = ">";
}
}
</script>

Toggle mute audio of video on click

I'am trying to mute the audio of a video on click, but for some reason it won't mute..
html:
<video src="background/background1.mp4" autoplay="autoplay" loop="loop" id="background"> </video>
<img src="button/audio_on.png" id="audio"/>
jquery/javascript solutions I have tried:
$('#audio').click(function() {
if( $("#background").prop('muted', true) ) {
$("#background").prop('muted', false);
alert('music paused');
} else {
$("#background").prop('muted', true);
alert('music playing');
}
});
Note: It does alert 'music paused' but never alerts 'music playing'
second method I've tried (note: it does change the img source):
//change music icon
$("#audio").on('dblclick', function(){
$("#audio").attr("src","button/audio_on");
document.getElementById("#background").volume = 1;
});
$("#audio").on('click', function(){
$("#audio").attr("src","button/audio_off");
document.getElementById("#background").volume = 0;
});
Does anyone know why it won't mute the audio of my video?

Try using the following code to toggle the audio of your video:
$("#audio").click( function (){
$("#background").prop('muted', !$("#background").prop('muted'));
});