HTML5 Video Playing Sound But No Visual

March 30th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

When I first heard murmerings of HTML5 a few years back, the ability to add video through use of a simple <video> tag was one of the first new features I remember being discussed. Up until last week, I still hadn’t had the opportunity to have a play with this functionality.

My chance came on a site that wanted to use video heavily in lightboxes to demonstrate a new product they were releasing. I did some research into the different video formats supported across devicces and browsers, and set to work. I actually ended up using Video.js due to its ability to provide a Flash fallback and to incorporate different skins. I got the video player code added in a few minutes and was ready to hit the ‘Play’ button on the website.

In FireFox the lightbox opened and the video played as expected. In Safari and Chrome however, the audio of the video could be heard but without the visual. I tried different video formats, different video players, different everything, but the two browsers would not behave as expected and simply just kept playing the sound.

The Solution

I mentioned that the videos were being shown in a lightbox. As a result I’d gone to some effort to hide and show the lightbox layer when the ‘Play’ button was clicked. What I didn’t realise however was that I’d hidden the actual <video> tag by doing something like so:

<video id="lightbox-video-player" style="display:none" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="563" data-setup="{}">
	<source src="/my-video.mp4" type='video/mp4'>
	<source src="/my-video.ogg" type='video/ogg'>

Notice that I’d put a ‘display:none’ on the video? This was the reason for only hearing sound on Chrome and Safari and, after removing this, the video played as expected.

Tags: ,
This entry was posted on Saturday, March 30th, 2013 at 9:39 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first