Video HTML5. How to start only when you click on a small static image?

advertisements

I'd like to be able to click on a small thumbnail image and have a video start playing in the full size. This is similar to one using a small image that one clicks on to show the full image.

I am using this code for the video

<video src="my_movie.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

Is there a way to set this, similar to youtube, where the there is a small image and clicking on it starts the full size movie, and similar to http://www.reddit.com/r/videos/ ?

If I do

<video src="my_movie.ogg" controls width=100px  height=100px>
</video>

Then the movie stays too small to see when clicking on it. It would be nice if there are an initial width and run time width to use. But there is not.

Is it possible to also open the movie in a separate pop-up window instead of a new html page? This way the original web page remains in view?

ps. it will be really nice, if the first frame of the movie is displayed as the small image to click on to run the movie, so that I do not have a to make a thumbnail image of each movie to use as the image.

The reason I want to do this, is that the space I have on the page is small and I wanted to put few movies in one row of a table, hence need the sizes to be small initially.

To Chris:

I've used your updated code. This is what happens: Using IE and Chrome, when I click on the images, nothing happens. However, when right-clicking, I see now a menu that has "PLAY" on it. When selecting this, the movie does play. But it only plays in the small size, not the large size.

When I tried my own .ogv file, converted to HTML video from mp4 using online service, the same thing happens. When I click on the image, nothing happens. When I right-click, and select PLAY, it plays. But still using the small size.

Here is the code I used. Which is your code, I just changed the name of the movie to use mine in this one so I can try firefox.

It seems HTML5 video is still not ready for prime time? How to make it work like with u-tube? Click on small image, opens the large size movie in separate window (it will be nice to have a pop-up window for this) but first it has to work in the same web page, which it does not so far.

<!DOCTYPE HTML>
<html>
<head>
</head>

<body>    

<script>
  window.onload = function() {
    var videos = document.querySelectorAll(".thumbnail");
    for (var i = 0; i < videos.length; i++) {
        videos[i].addEventListener('click', clickHandler, false);
    };

  function clickHandler(el) {
    var mainVideo = document.getElementById("mainVideo");
    mainVideo.src = el.srcElement.currentSrc;
  }
</script>

<video id="mainVideo" autoplay></video><br/>
<video class="thumbnail" width=150 height=150>
    <source src="movie.ogv">
</video>

</body>
</html>


You can go about this many different ways. However, I focused on one part of your question, which was that you thought it might be nice to NOT have to make thumbnail images of each movie.

In order to get that, you have to rely on the HTML5 video tag grabbing the first frame for you. I actually don't recommend you go this route overall, but I wanted to show you how you can accomplish it.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>    

<script>
  window.onload = function() {
    var videos = document.querySelectorAll(".thumbnail");
    for (var i = 0; i < videos.length; i++) {
        videos[i].addEventListener('click', clickHandler, false);
    };

  function clickHandler(el) {
    var mainVideo = document.getElementById("mainVideo");
    mainVideo.src = el.srcElement.currentSrc;
  }
</script>

<video id="mainVideo" width=320 height=240 autoplay></video><br/>
<video class="thumbnail" width=100 height=100>
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
<video class="thumbnail" width=100 height=100>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

</body>
</html>

You can also test it out here: http://jsfiddle.net/E4uDB/

(FYI: these are mp4s so IE and Chrome work, Firefox does not)

There is work to do with this approach. For one thing, you are asking the page to load videos just to make thumbnails. This is pretty bad as the user has to download the videos just to get a feature you can accomplish server side (at processing time).

You then load the video on the fly into a waiting "main window" which might cause another download, not to mention that this sample does nothing to make sure the video is loaded (which you can do, but I think this sample demonstrated enough of the point) to avoid bad user experience.

I don't recommend this because the better approach is to create image thumbnails in some kind of processing task and link up their image click events to load and play the desired video. You get the gist of how you can direct the video element to load and play a new source from my sample, but it certainly isn't trying to be production ready code.

I would strongly consider developing a server side processing task to create image thumbnails, so you can build a better player and one that doesn't make the browser download ALL of the videos just to make image thumbnails.

Another sample: http://cellbycell.com/files/quickwebsamples/Videothumbnails/videochooser.html

Click on an image and it will open and play the desired video in a new browser window.

The trick to this is that the chooser wires a click event to the images, then it uses the id of the images to pass in a query string variable to the player page. That page picks up the query string and plays the video of your choice. View source on both pages, but some highlights are:

The chooser page:

<script>
    window.onload = function() {
        var videos = document.querySelectorAll(".thumbnail");
        for (var i = 0; i < videos.length; i++) {
            videos[i].addEventListener('click', clickHandler, false);
        };
    }

    function clickHandler(el) {
        window.open("http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/VideoPlayer.html?Video=" + el.target.id);
    }
</script>

Select your video<br/>
<img id="Tool" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Tool.png">
<img id = "Cat" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Cat.png">

The target player page:

<script>
    window.onload = function() {
        var videoPlayer = document.getElementById("videoPlayer");
        var videoId = queryObj()["Video"];

        switch(videoId)
        {
            case "Tool":
              videoPlayer.src="http://techslides.com/demos/sample-videos/small.mp4";
              break;
            case "Cat":
              videoPlayer.src="http://html5demos.com/assets/dizzy.mp4";
              break;
        }
    }

    function queryObj() {
        var result = {}, keyValuePairs = location.search.slice(1).split('&');

        keyValuePairs.forEach(function(keyValuePair) {
            keyValuePair = keyValuePair.split('=');
            result[keyValuePair[0]] = keyValuePair[1] || '';
        });

        return result;
    }

</script>

Enjoy your video!<br/>
<video id="videoPlayer" autoplay controls></video>

No matter what you decide to do, you have some work ahead of you. I strongly suggest you look for some of the JavaScript video player libraries out there as well. I think it's good to stand on the shoulders of those who've been working at it already.