This question already has answers here:
HTML5 video - show/hide controls programmatically
(3 answers)
Closed 3 years ago.
Default behavior for the html video element causes the video controls to appear at the end of playback. Is there a way to change that behavior so that the video controls remain hidden?
I'm assuming that there is an if statement in the source code that determines if the controls are visible if the video has ended.
I've tried removing the controls when the video ends, but then the controls aren't accessible at all.
player.addEventListener('ended', () => {
player.removeAttribute( 'controls' );
});
I've tried removing the controls and then setting the controls, but the controls still appear.
player.addEventListener('ended', () => {
player.removeAttribute( 'controls' );
player.setAttribute( 'controls', '' );
});
I've also tried just setting the controls to false, but that does the same as removing the attribute 'controls'.
player.addEventListener('ended', () => {
player.controls = false
});
Basically u were almost there. Just use
player.addEventListener('ended', () => {
player.removeAttribute('controls');
});
(removed the video_obj)
I am using the following code to view a video in loop without any controls at all.
<video id="player" autoplay loop muted>
<source src=".../your/source.mp4" type="video/mp4" />
</video>
Related
I'm trying to hide a video when it is paused but the paused event is being triggered when you move the timeline on the video player as well. Is it possible to be able to adjust the video timeline without triggering the pause event?
var singleVideo = document.getElementById('single-video');
$(singleVideo).get(0).addEventListener('pause', function(){
$('#singleVideo').hide();
});
After clicking the timeline, the video pauses for a few seconds and continues to play.
HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>Play and pause the video</p>
<video id="single-video" height="200" controls="controls" preload="none" onpause="myFunction()">
<source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Under_forvandlingens_lov_%281911%29.webm">
</video>
</body>
A tricky thing is just to add the async function and wait for a second to get the video pause status.
JS
async function getStatus(singleVideo) {
return new Promise(resolve => {
setTimeout(() => {
resolve(singleVideo);
}, 1000);
});
}
function myFunction() {
var singleVideo = document.getElementById('single-video');
//Get status
getStatus(singleVideo).then(video => {
if(video.paused){
console.log("Stream pause");
$(singleVideo).hide();
}else{
console.log("Stream not pause, Just drag/click timeline");
}
});
}
"Is it possible to be able to adjust the video timeline without triggering the pause event?"
No. This is the standard procedure of how a browser works.
"I'm trying to hide a video when it is paused but the paused event is being triggered when you move the timeline on the video player as well."
You need to create your own custom controls. This way your own pause button's function would hide the video, whilst scrubbing the timeline itself would only just control seeking.
If you choose to use the browser's built-in controls then you'll have to think creatively.
For example: When using the timeline, the pause event is followed by a seeking event, so just have a temporary listener for a seeking event during the pause event. Such "seeking" would let you know the video is not just paused and that it should remain visible. Without any extra "seeking" event, you can assume the video is truly paused...
An example of the concept:
<!DOCTYPE html>
<html>
<body>
<video id="single-video" width="640" height="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
var singleVideo = document.getElementById('single-video');
singleVideo.addEventListener("seeking", mySeek);
singleVideo.addEventListener("playing", myPlaying);
singleVideo.addEventListener("pause", myPause);
//# Your main Seek handler function (if needed)
function mySeek()
{
/* if you have custom code for during Seek events */
//alert("you did seeking..."); singleVideo.play();
}
//# During playback keep video visible
function myPlaying() { singleVideo.style.opacity="1"; }
//# Pause function also checks if a Seek event happens during Pause event
//# eg: Hide video but IF a Seek also happens during, then keep video visible
function myPause()
{
singleVideo.style.opacity="0.1"; //# hide here...
//# add temporary new Seek handler function (has alternate instructions)
singleVideo.addEventListener("seeking", mySeekInPaused);
//# force video visiblity & re-add main Seek handler function
function mySeekInPaused()
{
singleVideo.style.opacity="1"; //# keep visible
singleVideo.removeEventListener("seeking", mySeekInPaused); //# not needed now
}
}
</script>
</body>
</html>
I'm using the video element to show a video on my website. I used the poster attribute to show an image with some text and a play button on it. With Javascript I defined that if you click on the video element/poster, the video starts.
Now i want the controls of the video (play/pause-button, sound, full-screen) only shown when the video is played, so you can pause the video or adjust the volume. I added the controls attribute but now it also show the controls when the video is not played.
<video id="video" class="width-100 display-none borderRadius-l breakPointM-display-inline video" poster="splashvideo.png" preload="auto" controls width="300" height="150">
<source src="video.mp4" type="video/mp4" />
</video>
Can i fix this with some javascript or css?
I know this was asked quite a while back, but I wanted to see if someone had a nice solution to this which came up empty so thought I share mine.
To answer your question; Yes you can fix this with Javascript or CSS.
The solution I came up with was to use Javascript to add the controls attribute upon clicking on the video. So the same way you have a click event handling the play and pause using JS, you just add or remove the attribute "controls" at the same time.
https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute
el.setAttribute('controls','');
https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
el.removeAttribute('controls');
Testing
Chrome (56): Works, controls fade in and fade out very quickly, show again when mouse is moved on video
Firefox (52): Works, controls don't show until mouse is moved on video
Safari (10): Works, controls remain visible until mouse moves outside of video
Edge: Didn't test :(
Yes, the full solution looks like this:
HTML:
Video plays when poster is clicked using onclick="this.play".
<video id="video1" class="width-100 display-none borderRadius-l breakPointM-display-inline video"
poster="https://placehold.it/350x150" preload="auto" width="300" height="150" onclick="this.play()">
<source src="video.mp4" type="video/mp4" />
</video>
JS Code:
Add event listeners for playing and pause, the below removes controls if paused, brings back controls while playing.
var video1 = document.getElementById('video1');
function videoPausePlayHandler(e) {
if (e.type == 'playing') {
//add controls
video1.setAttribute("controls","controls");
} else if (e.type == 'pause') {
//remove controls
video1.removeAttribute("controls");
}
}
//Add event listeners
video1.addEventListener('playing', videoPausePlayHandler, false);
video1.addEventListener('pause', videoPausePlayHandler, false);
You can see it working here: https://jsfiddle.net/pypgjt4r/
I am struggling to get an HTML5 video to play when arriving at the page via an AJAX request.
If you refresh the page, or land directly on the page, it works fine. But when navigating to the page via AJAX it does not play.
The code is:
<video id="video" autoplay="autoplay" loop="loop" muted="muted" poster="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg">
<source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.mp4" type="video/mp4">
<source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.webmhd.webm" type="video/webm">
<img src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg" alt="your browser does not support html5 video">
</video>
I have tried firing the following code on success of AJAX page load:
video = document.getElementById('video');
video.load();
video.addEventListener('loadeddata', function() {
video.play();
}, false);
And also simply:
video = document.getElementById('video');
video.play();
I have also tried using plugins such as video.js, but to no avail.
I can't help but think I am missing something really simple. Surely if the video is on the page and has autoplay set, then it should just play regardless of whether you arrive at the page via AJAX or directly?
The AJAX request for the page only updates the #main element (which the video is inside) and the does history.pushState - could that be anything to do with it? It doesn't seem likely...
For anyone struggling with the same issue, I found that after the ajax call the video had the property 'paused: true' even thought autoplay was set and I was calling video.play() on 'loadeddata'.
The solution was to trigger video.play() when pause is detected. I also found that it worked smoother not having the 'autoplay' attribute on the video and became jerky after multiple initialisations.
DOM:
<video id="video" loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
JS:
video = jQuery('#video').get()[0];
video.addEventListener('loadeddata', function() {
video.play();
});
video.addEventListener('pause', function() {
video.play();
});
Also, for anyone wondering why I might want this ability, it is for a video playing on the background of a webpage, hence no need for user to play/pause it.
you can call video.play() before your ajax calling.
like
html
<video id="video">...</video>
JS
function play() {
$("#video")[0].play(); // call play here !!!
$.ajax(
"your url",
{your data},
function() {
$("#video")[0].play(); // usually we call play() here, but it will be pause beccause it can not be play if not in click or touch event sync
....
}
);
}
Your video tag has no ID. What if you had two <video> tags? You want:
<video id="blah"...
and then:
video = document.getElementById('blah');
Potentially it's a syntax error, because you seem to have some PHP leaking into the HTML in the form of '; ?> at the end of the poster and src attributes.
It seems like these answers do not work anymore. I tried the accepted one, and it didn't work.
It looks like Chrome can't find the video object and it stands as undefined.
You can do something else. Quite simple. You use the Global Event Handlers .ajaxSuccess as a marker for that the request has been handled and the video can now play.
In that way you are sure that the video object exist. And for Chrome you do a little if statement.
video = jQuery('#video').get()[0];
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if( video ) {
video.play();
} else {
// Chrome can't find the video object and throws a 'undefined'
// Therefore you have to activate the video manually
jQuery("#videoID")[0].play();
}
});
I'm trying to play an 8.6 second video once completely, and then loop a small section of the video infinitely, to keep the illusion of a never-ending video. So far I've looked into the media fragments URI, and the ended event of the video. Setting the currentTime attribute in the ended event listener works, but it makes the video "blink".
At present, I'm using a timeupdate event listener to change the time when the video is approaching the end [shown below]
elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
elem.currentTime = 5;
elem.play();
}
}, false);
JSFiddle here
This works as well, but the video pauses visibly before restarting at 5 seconds. Is there a smoother way of playing the video once and then looping a segment of it?
Your code is fine, the problem is with your MP4 file! Try using a much smaller video like this one ( http://www.w3schools.com/tags/movie.mp4 ) to confirm the issue is not with your code.
So how can you achieve the same result but with large videos files?
You will need two video files:
video1 is the main video
video2 is the looping video
Remember: HTML5 video has no problem playing and looping large video files so we will use this method to play the videos.
In the example below we will play the first video and when it finishes we will execute a function to hide video1 and then show/play video2. (Video 2 is already set to loop)
Don't forget to load JQuery in your head otherwise this will not work.
<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="1080" height="568">
<embed width="1080" height="568" src="movie.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>
<video id="video2" width="1080" height="568" poster="loop.png" loop>
<source src="loop.webm" type="video/webm">
<source src="loop.ogg" type="video/ogg">
<source src="loop.mp4" type="video/mp4">
<object data="loop.mp4" width="1080" height="568">
<embed width="1080" height="568" src="loop.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>
<script>
$( "#video2" ).hide();
function run(){
$( "#video1" ).hide();
$( "#video2" ).show();
document.getElementById("video2").play();
};
</script>
Try the following, to 'rewind' it as soon as it ends:
vidElem.addEventListener("ended", function () {
vidElem.currentTime = 2.5;
vidElem.play();
}, false);
Updated fiddle: http://jsfiddle.net/Lt4n7/1/
I just had to deal with the same problem and noticed the same issues with flickering. Here was my solution:
Get 2 videos (or sets of videos) - one for the non-looped section, the other for the looped section
Create 2 video elements
set the looping element to 'display:none'
Then just capture the ended event and swap display status (example uses jquery but you could use 'style.display="none/block"' just as easily:
VideoPlayer1 = document.getElementById('video1');
VideoPlayer2 = document.getElementById('video2');
VideoPlayer1.addEventListener('ended', videoLooper, false);
function videoLooper()
{
VideoPlayer2.play();
$(VideoPlayer2).show();
$(VideoPlayer1).hide();
}
You can't solve this issue in javascript. That delay you see depends on the video compression and the hardware.
To start playing at a time that is not 0, the video decoder has to go back and find a key frame and then build the current frame by reading everything between the last key frame and your chosen time.
I'm not an expert in video compression, but maybe there is a way to pick these key frames and place them exactly where you need them. I don't think it will be easy and smooth, though.
If you're looking for an easier solution, use #Random's, but it uses two <video> tags to work around this limit.
var iterations = 1;
var flag = false;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function() {
alert('end');
if (iterations < 2) {
this.currentTime = 0;
this.play();
iterations++;
document.getElementById('iteration').innerText = iterations;
} else {
flag = true;
this.play();
}
}, false);
myVideo.addEventListener('timeupdate', function() {
if (flag == true) {
console.log(this.currentTime);
if (this.currentTime > 5.5) {
console.log(this.currentTime);
this.pause();
}
}
}, false);
<div>Iteration: <span id="iteration"></span></div>
<video id="video-background" autoplay="" muted="" controls>
<source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4">
</video>
<div>Iteration: <span id="iteration"></span></div>
// Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox
I have a video tag like this. All this videos have to play dynamically one after other
I tried writing some javascript functions in eventlistner "progress" of the video, but not working.How to play these videos automatically?anybody please suggest any codes in javascript or jquery
<div id="divVid">
<video id="video1" width="320" height="240" autoplay >
<source src="vid_future technology_n.mp4#t=20,50" >
Your browser does not support the video tag.
</video>
</div>
JS Code (Updated from comment section)
document.getElementById("video1")
.addEventListener("progress",
function () {
var i = 0;
var vid = document.getElementById("video1");
if (vid.paused) {
if (vid.currentSrc == myvids[i]) {
vid.currentSrc = myvids[i + 1]; } i = i + 1;
}
});
The set of <source> elements provide alternative formats for the video for different devices, not a playlist.
If you want to have a playlist, then listen for an ended event and change the src with JavaScript.
In response to edits to the question:
No, really change the src. You are trying to change the currentSource which is defined as being readonly
I said ended. Don't touch progress, you what to play the next video when the last one is finished, not when a tiny chunk of it has played
The list of <source> elements still isn't a playlist. Don't try to use them as such. Keep the list of videos somewhere else (e.g. a JS array).