15

I use this to have a video player on browser

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?

Mee
  • 815
  • 5
  • 11
  • 21
  • Not exactly, but you can take advantage of the [`poster` attribute of ` – Passerby Mar 24 '14 at 11:13
  • But I will have to create a thumbnail :( – Mee Mar 24 '14 at 11:30

5 Answers5

9

I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below

<video preload="metadata" width="320" height="240" controls>
      <source src="video.mp4#t=15" type="video/mp4">
    </video>

and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video

Sahil Lalotra
  • 111
  • 1
  • 7
  • This also makes the video start at the given timestamp (here 15 seconds). So the first x seconds are skipped, which is not what a OP wants – Pingger Shikkoken Apr 08 '23 at 18:32
8

Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )

<video width="320" height="240" controls id="video">
    <source src="video.mp4" type="video/mp4">
</video>


$(document).ready(function() {


            var time = 15;
            var scale = 1;

            var video_obj = null;

            document.getElementById('video').addEventListener('loadedmetadata', function() {
                 this.currentTime = time;
                 video_obj = this;

            }, false);

            document.getElementById('video').addEventListener('loadeddata', function() {
                 var video = document.getElementById('video');

                 var canvas = document.createElement("canvas");
                 canvas.width = video.videoWidth * scale;
                 canvas.height = video.videoHeight * scale;
                 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                 var img = document.createElement("img");
                img.src = canvas.toDataURL();
                $('#thumbnail').append(img);

                video_obj.currentTime = 0;

            }, false);

        });

Source 1 Source 2

Community
  • 1
  • 1
Dafen
  • 1,122
  • 1
  • 9
  • 26
  • It will start play at the time set in "time" variable, but I want it to play from the begin, just display image from 0:00:15 – Mee Mar 24 '14 at 11:32
  • Try to put the whole code into the event function. So after this.currentTime;... After the append is done, set the time back to 0. Let me know, if that works. =) – Dafen Mar 24 '14 at 11:43
  • I add this to the end of script: "document.getElementById('video').addEventListener('loadedmetadata', function() { this.currentTime = 0; }, false);" It jump back to the begin, but so do the thumbnail which is expected to be captured at 0:00:15 – Mee Mar 24 '14 at 11:58
  • The videos have to be hosted under the same domain, i don't quite know why. This exapmple works in chrome and safari but not firefox: [Click Me](http://lawyered.eu/test/video.html). This is because firefox does not support mp4. at least not on mac os, on windows I think it does. You could now hide the video and display and play it when the user clicks the thubnail image. good luck. – Dafen Mar 24 '14 at 13:28
  • Trying to explain what happened with "Mee" here, just for others who may come here with same problem. Adding an event handler at end of script doesn't guarantee that the handler will be executed only after all other event handlers added before it. It may become the last handler to run for same event, but handlers of other events(For example 'loadeddata' in above code) may run after this handler. Why? Event handlers are executed in order which events happen. It may sound obvious to those who work with event-handlers, but is a common pitfall for those who are just starting event driven coding. – rineez Jun 11 '21 at 06:35
3

Using the poster attribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.

http://www.w3schools.com/tags/att_video_poster.asp

Trying to create a function to dynamically grab another segment of the video to use as the poster will undoubtedly create more latency and overhead for the client, negatively affecting the UX.

jpostdesign
  • 2,548
  • 2
  • 15
  • 15
  • 12
    Please don't link anything from W3Schools, they're just copying content from Mozilla Developer Network for example for profit. – Hypolite Petovan Jan 31 '17 at 17:02
  • @HypolitePetovan I gotta disagree with you. While criticism of W3Schools is usually well-deserved, it also often gets taken to an extreme, like in your comment here. Yes, W3S is far from the ideal source of learning to code, especially nowadays, and is filled with outdated and sometimes incorrect info. But that's absurd for you to say they're just copying content from MDN. In fact, I'd argue MDN's format is heavily inspired by W3School's in the first place. I think back in the day it was a very useful resource and some of its content still is today. – D-Marc May 31 '20 at 20:24
  • 1
    I don't owe fairness to W3Schools, they chose to publish incorrect information and invest aggressively on SEO for profit. The correct link should be https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes – Hypolite Petovan Jun 10 '20 at 18:00
  • 2
    The description on the link you posted does nothing to answer the OP's question anyway. So not sure why this even has upvotes. – Greg Quinn Jul 08 '20 at 00:20
3

I did it this way:

It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played

html:

<video id="video1" src="path/to/video#t=15" onplay="goToStart()"  controls ></video>

javascript:

function goToStart(){
    if (document.getElementById('video1').currentTime == 15){
    document.getElementById('video1').currentTime = 0;
    }
}
JSnub
  • 31
  • 1
-1

Add #t=15 to your video source, like below

<video width="320" height="240" controls>
  <source src="video.mp4#t=15" type="video/mp4">
</video>

This will starts video after 15 seconds.

IncredibleHat
  • 4,000
  • 4
  • 15
  • 27
Chetan Jain
  • 23
  • 1