Question

I tried the following HTML for displaying a video. But I am not able to see video.

Its only loading the video, but not playing it. I’m using ‘video.js‘ a JavaScript and CSS library which manipulates the video tag for a consistent UI.

If I am missing something please tell me.

Here is my code:

<video id="my_video_1" class="video-js vjs-default-skin" controls
        preload="auto" width="640" height="264" poster="my_video_poster.png"
    data-setup="{}" >
        <source src="scroll_index.mp4" type='video/mp4'>
    <source src="scroll_index.webm" type='video/webm'>
</video>

I have included above code in body tag and also included references to video.js and video.css in the head tag.

Answer 1

I don’t know what browser you are testing with, perhaps it doesn’t support the html5 video tag, but regarding your comment, I don’t think so 🙂

However, you have neither set the controls attribute to make the control panel appear so user can manually start (and control) the video, nor set the autoplay attribute so that the video will play as soon as it is ready, so I suggest adding these attributes:

<video id="my_video_1" class="video-js vjs-default-skin" controls
       preload="auto" width="640" height="264"   poster="my_video_poster.png"
       autoplay="autoplay" controls="controls" 
       data-setup="{}">
    <source src="scroll_index.mp4" type='video/mp4'>
    <source src="scroll_index.webm" type='video/webm'>
</video>