Every question on the subject explain how to remove the controls of an HTML5 video element.
videoElement.removeAttribute('controls');
But browsers, Firefox and Chrome, have a way of just hiding the controls which makes them disappear when cursor is not moving and the video is playing. And makes them appear again if you move the cursor or when video stops playing.
<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
Video test file: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
If you play the above video, and leave it alone without moving the cursor, the controls will disappear. The if you move the cursor again they'll appear again. They'll also appear upon pausing or video finishing.
Very much like popular native or desktop video players.
This is what I want. I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
Is there a way to achieve this without removing the controls entirely?
Try this:
$("#myvideo").hover(function() {
$(this).prop("controls", true);
}, function() {
$(this).prop("controls", false);
});
// if always hide
$("#myvideo2").click(function() {
if( this.paused)
this.play();
else
this.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="myvideo" width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
<br/>All time hide controls:<br/>
<video id="myvideo2" autoplay width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
Put a div over the video and hide/show that, you answered your own question;
I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
Also take a look at this;
Styling HTML5 Video Controls
I'm using videojs.com library and the solution was to add
.vjs-control-bar {
display:none !important;
}
to the stylesheet.
You can set event listener on your video and remove controls on play
<video id="video">
<source src="http://example.com/video.mp4" type="video/mp4"/>
</video>
<script>
video.addEventListener('play', () => {
video.setAttribute('controls', 'true');
});
video.addEventListener('pause', () => {
video.removeAttribute('controls')
});
</script>
use this:
video::-webkit-media-controls {
display: none;
}
you don't need javascript. use CSS.
Display:none on the controls.
Related
Can Javascript detect a completed video on a webpage?
We would like to run a video on firstload (100vh width and height). After watching this video, the CSS of our webpage must change (.videobox visibility hidden; .pagecontent visitbility visible;).
Is there any solution for this?
You can detect when an HTML5 has finished playing with an 'ended' event listener, and update the CSS there:
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// Video has finished playing!
// To update the CSS in your question,
// select the proper elements through their class
// and change their style.
document.getElementsByClassName('videobox')[0].style.visibility = 'hidden';
document.getElementsByClassName('pagecontent')[0].style.visibility = 'visible';
}
</script>
If you encounter any problem or question while implementing my solution, please let me know in a comment.
I have a folder with several hundred mp4 files of 2sec duration each.
I would like to play them one after the other without any glitch between them.
I have tried what is advised in Playing videos one after another in html5 but this does not solve the glitch problem between video transitions.
<video width="256" height="192" id="myVideo" controls autoplay>
<source src="../uploads/VID_190923141334_20190923_141336.mp4" id="mp4Source" type="video/mp4">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler_ended,false);
function myHandler_ended(e)
{
mp4Vid.src = "../uploads/VID_190923141334_20190923_141338.mp4";
player.load();
player.play();
}
</script>
Can anyone point me to the right direction in order to eliminate the glitch in each video transition?
The "2 players 1 hidden" method is not stable: it does not work on mobile devices, and it will lag on older/slower computers when switching one player to another. I wanted to create a live stream with this method, but it's an ugly DIY, don't do that.
There is an HTTP Live Streaming (HLS) standard and with it you can continuously play small m3u8 (.ts) chunks (it is supported by videoJS and OBS also has m3u8 recording support).
I made live streams on Sia Skynet, which is a static (non-modifiable) decentralized storage for files (like IPFS, but different). Here you can find some demos & the source code: https://github.com/DaWe35/Skylive
One approach is to have two video elements and players on your page - this approach is often used for pre, mid and post roll adverts, which are often from a different source than the main video itself.
The two video elements are in the same place on the page, one over the other.
You play the first video and when you are near the end of it preload and then pause the second video but keep the player hidden.
At the point where the first video ends, you hide the first player and show and start the second player.
You then again preload and pause the next video in the player you have just hidden and it becomes the one ready to start when the one now playing is finished.
The snippet below hides the second video until the first has ended and then plays the second one hiding the first. This is just a rough outline you can play with where you cue the movies to etc. If you leave your pointer over the video you can watch the timeline - films fade in and out so it may not be obvious it is playing.
Hover over the video ion the snippet while it is playing to see the time as it switches from one to the other.
var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"
vid1.onloadeddata = function() {
vid1.currentTime = 872;
vid1.play()
};
vid2.onloadeddata = function() {
vid2.currentTime = 10; //Just to illusrate as begining is black screen
vid2.pause()
};
vid1.onended = function() {
vid2.play()
vid1.style.display = "none"
vid2.style.display = "block"
};
<video id="MyVid1" width="320" height="176" controls preload="auto">
<source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
Your browser does not support this video format
</video>
<video id="MyVid2" width="320" height="176" controls preload="auto">
<source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
Your browser does not support this video format
</video>
I have a video page and I use photos as thumbnails. I want to convert photos to video playback in .webm format. I wrote a script that, when you hover over a photo element, adds and plays a video tag.
$(function(){
$('.item-image').hover(function(){
$('.item-image video').remove();
$v = $(this).attr('v');
if ($v){
$p = '<video src="'+$v+'" class="p" ></video>';
$(this).append($p);
}
$(this).children('video').play();
}, function(){
$(this).children('video').remove();
});
});
Unfortunately, when hovering, the autoplay does not work. You must first click in the video to play.
I noticed that after clicking and refreshing the page, playing the video after hovering the cursor works correctly. Do you have any idea why it does not work as it should?
I found a solution.
It was enough to add a muted to video tag
<video src="URL" loop muted autoplay class="p" ></video>
I have a video tag and a movie cutted in parts of 10 seconds each, with name: 1.webm, 2.webm ....... 1535.webm. I tried to make a js code which find when the video is ended and play the next one, but I have a problem: the screen flashes and the movie is not playing continuously. I need to play it exactly as a movie, with continous video.
Is there any options to do this? It doesn't matter if it is not in JavaScript or if it is a combination of many scripts and codes.
<video id="my_video" width="640" height="480" autoplay>
<source src="files/1.webm" type="video/webm">
</video>
<script>
var src = 0;
var video = document.getElementById("my_video");
document.querySelector("#my_video").addEventListener("ended", nextVideo, false);
function nextVideo() {
src = src + 1;
video.src = "files/" + src + ".webm";
video.play();
}
</script>
It becomes very difficult if you are changing the src of the video as it will load the entire video once src changes and hence you are facing flashing screen effect. It seems impossible to get seamless video by using video parts yet you can try it this way:
Pre-load all the videos using different elements for each video and set preload="auto" attribute to all the elements. You need to play with the visibility of the elements in such a way that you will play one video at a time. First video will be autoplayed. As the ended event fires, just change the visibility of the next element to be true and previous element to be false(Do not use dispay:block/display:none as I have observed that in some mobile devices, video tags having style display:none are not being pre-loaded by browser). Also maintain some background to the video just to avoid white background flash effect.
Refer this snippet:
var my_video = document.getElementById("my_video");
var my_video2 = document.getElementById("my_video2");
document.querySelector("#my_video").addEventListener("ended", nextVideo, false);
function nextVideo() {
my_video2.play();
my_video2.setAttribute('class', '');
my_video.setAttribute('class', 'hidden');
}
.hidden {
position: absolute;
top: -10000px;
left: -10000px;
}
video {
background: black;
}
<video id="my_video" width="640" height="480" preload="auto" autoplay controls>
<source src="test.mp4" type="video/mp4">
</video>
<video id="my_video2" width="640" height="480" preload="auto" controls class="hidden">
<source src="test2.mp4" type="video/mp4">
</video>
<button type="button" onclick="nextVideo()">Next</button>
May be this will help you we make two video tags and set first 10 sec movie on first video tag, second movie on second video tag and third on again first video tag this process done one by one.
check my link http://jsfiddle.net/qoch687a/2/
There is timeupdate event which triggers every sec and we check duration
video.ontimeupdate = function timeUp(e){
if(parseInt(e.originalTarget.duration - e.originalTarget.currentTime)==1){
document.getElementById("my_video1").src=videos[1];
document.getElementById("my_video1").play();
document.getElementById("my_video1").onloadeddata = function(){
clearInterval('intTime');
intTime = setTimeout(function(){document.getElementById("my_video").style.display="none";
document.getElementById("my_video1").style.display="block";},1000);
};
}
}
Along with the poster image I want a loader image(an animated gif) to be displayed while the video is being downloaded. How is it possible ?
A cheap way could be to use an animated GIF in the poster attribute which will be replaced when the video begins to play. Example:
<video poster="loading.gif" preload="auto" controls autoplay>
<source type="video/mp4" src="video.mp4"/>
</video>
Here is my solution for this problem since pixelearth's answer doesn't seem to work on firefox (probably a problem with the fake poster)
HTML
<video id="video1" height="236" preload="auto" controls>
<source src="yourVideo.mp4">
Your browser does not support HTML5 video.
</video>
JS
$('#video1').on('loadstart', function (event) {
$(this).addClass('background');
$(this).attr("poster", "/your/loading.gif");
});
$('#video1').on('canplay', function (event) {
$(this).removeClass('background');
$(this).removeAttr("poster");
});
CSS
video.background {
background: black
}
With this answer you don't have to mess around with fake poster or abuse attributes for purposes that they were not made for. Hope this helps.
P.S. You could of course add some more events to add the poster attribute e.g. if it can't play further in the middle of the video and needs more buffering
You can find a jsfiddle which shows my code here
It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
My original theory that I thought should have worked (but wouldn't) was this
Add loading bg image to video when loading via js and css
Remove when ready to play
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading')
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading')
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!
You could attach a listener to the video's loadstart event and use it to overlay an animated GIF on top of the video element, then hide the loading overlay once the loadeddata event fires. See The W3C's media events draft for a list of events you can hook into.
They also have a demo page for media events.
This is quite complicated, you must listen to various video events to show/hide & update width of the loader image correctly. Those events include (but may not limited to): loadstart, progress, loadeddata, waiting, seeking, seeked. You can use a certain open source player (e.g. jPlayer) or download its source to examine further.
<video
id="mainVideo"
width="100%"
style="max-width: 100%; max-height: 100%;"
preload="auto"
autoplay="autoplay"
(loadeddata)= "checkVideoLoaded()"
>
<source [src]="assets?.video?.urlMP4" type="{{videoType}}">
</video>
on isVideoLoaded flag show and hide loader
this.isVideoLoaded = false;
checkVideoLoaded(){
this.isVideoLoaded = true;
}