Develop Reference

Video controls only when video plays (html5)

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/

HTML5 video source changing

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).

Create a function javascript/jquery that detects clicks on canvas

I need to make a function where if I click on a particular image on my site, it'll play a specific audio file that's associated with that picture ONLY. I have some code, but I can't seem to get the function part correct. I want so that everytime you click the image, it'll play the specific audio and when you click it again, it'll pause. I have lots of images on my site. Thank you so much!
Edit: the website wouldn't let my post a screenshot of the code since I'm a new member,
[fiddle. net link][2]
[2]: http:// jsfiddle.net/c8KTg/

You should revise your audio markup:
<audio controls="controls" id="clips">
<source src="1.mp3" />
<source src="2.mp3" />
</audio>
Then something like this would probably do it:
$('.images').each(function(index, element) {
$(this).click(function(e) {
var id = this.attr('id');
var sound_id = id.split('image')[1];
var music = $('#clips').get(sound_id);
music.play();
});
});

Dynamically using the first frame as poster in HTML5 video?

I'm wondering if there's any straightforward way to achieve this effect, without needing backend code to extract a frame, save it as a jpg and database it somewhere.
An effect whereby the first frame of the video just shows up as the poster when the video loads would be so helpful (it would only work if the browser can play back the video obviously, which might be a little different from how poster traditionally works, but that is not a concern.

Did you try the following?
just append time in seconds #t={seconds} to source URL:
<video controls width="360">
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
</video>
I have chosen a fraction of second (0.1) to keep number of frames small, because I have the suspect that if you put 1 second, it would "preload" the first 1 second of video (i.e. 24 frames or more ....). Just in case ...
Works fine on Chrome and Firefox on desktop :)
Works not on Android mobile, though :(
I did not test on iOS, iPhone, IE yet ??
Edit May 2021:
I realized that many modern browsers now show automatically a poster of first frame.
Seems like they heard us :-)

To make it simple you can just add preload="metadata" to your video tag and the second of the first frame #t=0.5 to your video source:
<video width="400" controls="controls" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>
Best of luck!

There is a Popcorn.js plugin called Popcorn.capture which will allow you to create posters from any frame of your HTML5 video.
There is a limitation that is imposed by the browser that prohibits reading pixel data of resources requested across domains (using the canvas API to record the current value of a frame). The source video must be hosted on the same domain as the script and html page that is requesting it for this approach to work.
The code to create poster using this plugin is quite simple:
// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );
// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {
this.currentTime( 10 ).capture();
});

I recently did this for a recent project that works on desktop and mobile. The trick was getting it to work on iPhone.
Setting preload=metadata works on desktop and android devices but not iPhone.
For iPhones I had to set it to autoplay so the poster image automatically appears on initial load. iPhones will prevent the video from auto playing, but the poster image appears as the result.
I had to do a check for iPhone using Pavan's answer found here. Detect iPhone Browser. Then use the proper video tag with or without autoplay depending on the device.
var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
$videoTag = "";
if(isIphone()) {
$videoTag = '<video controls autoplay preload="metadata">';
} else {
$videoTag = '<video controls preload="metadata">';
}

You can set preload='auto' on the video element to load the first frame of the video automatically.

Solution for #2, #3 etc. frames. We need attach disposable handler .one() for resetting default frame.
<video width="300" height="150" id='my-video'>
<source src="testvideo.mp4#t=2" type="video/mp4" />
</video>
$(function () {
let videoJs = videojs('my-video');
videoJs.one('play', function () {
this.currentTime(0);
});
});

I found a great way to dynamically add poster to a video!
To show the desired frame from video (in my case it's the frame at 1.75 seconds) - add preload="metadata" to the video element and #t=1.75 to the end of source URL.
Add eventListener to the video element that will listen for play event only once.
Once the event is emitted reset the video time.
<video width="100%" controls="controls" preload="metadata" id="myVid">
<source src="path/to/your/video#t=1.75" type="video/mp4">
</video>
<script>
var el = document.getElementById('myVid');
el.addEventListener('play', () => {
el.currentTime = 0;
}, { once: true });
</script>

Changing video on mouseclick?

I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?
Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.
Update: With Galen's help and some Google searches, I figured it out:
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
video1.style.display = 'none';
var video2 = document.getElementsByTagName('video')[1];
video2.play();
}
</script>
<body>
<video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();">
your browser does not support the video tag
</video>
<video src="video2.ogg" controls="controls" preload="preload">
your browser does not support the video tag
</video>
</body>
</html>

Add this code to the click event of whatever you want
// pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();
Add this to make the first video loop
var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
video1.play();
});

it's tough to be specific with the information you have given, but you could use javascript or jquery to do this. Bind a click event to a DOM element, and on click change the source of the video. I am assuming that the video is determined by a source parameter in an swf.