November 17, 201411 yr I realise this sounds like a very basic question and if it is actually showing up properly for people (which right now seems like pot luck) with its controls then you may not be able to troubleshoot it. I'm doing a blog post about the HTML5 Video element at the moment debugging issues such as these. http://www.jonniegrieve.co.uk/lab/video/video.html Here's my code. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Video and Audio</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> </head> <body> <h1>Basic HTML Video</h1> <video autoplay controls> <source src="olympic.mp4" type="video/mp4"> <source src="olympic.ogg" type="video/ogg"> <!-- --> <source src="olympic.webm" type="video/webm"> <track label="English" kind="subtitles" srclang="en" src="caption.vtt" default> </video> </body> </html> The files are all uploaded. The video files are all relative in the same folder as the HTML file. The src and types are all correct I'm sure. It's all valid HTML. So it should be simple, yes? From my perspective, the video works on my desktop, but not my laptop. Any video guru's might know what's wrong because I'm out of ideas :/
November 17, 201411 yr Works fine for me on IOS, are you previewing with Firefox because it doesn't fully support the video tag at the moment so you need a fallback.
November 17, 201411 yr Author Works fine for me on IOS, are you previewing with Firefox because it doesn't fully support the video tag at the moment so you need a fallback. It's Chrome i'm doing all my testing on at the miment. But that I thought that's why you had the source element, so you could add 3 versions of the same video and catch all the main browsers. I suppose what I really need is an alternative like Flash whenever the video tag for whatever reason fails. At least until Firefox catches up. Yet I don't see why one platform should fail and not the other bearing in mind they're both the same version of Chrome. (38)
November 17, 201411 yr I remember something about the autoplay attribute only works in very few browser versions. Instead you can start the playback on pageload with js. document.ready = function (){ var videoPlayer = document.getElementById ('theIdOfYourVideoTag'); videoPlayer .oncanplay = function() { videoPlayer.play(); }; }; EDIT: I've never had any problems with FF and the video tag as long as I provided the ogg. But your server can be configured to not serve the required MIME types. If you are having problems with FF you can try to add this line to your .htaccess AddType video/ogg .ogv Edited November 17, 201411 yr by Nillervision
November 17, 201411 yr You could also use something like http://mediaelementjs.com/ which pulls in a Flash player for any browsers that have problems...
November 18, 201411 yr i thought you didnt need to provide ogg for later versions of firefox?https://support.mozilla.org/en-US/kb/viewing-html5-audio-and-video "MP3, AAC, and H.264/MPEG-4 AVC are patented audio/video compression formats. They can be viewed in Firefox using built-in OS libraries (so neither Mozilla nor you need to pay fee) if embedded in the MP4 container format (.mp4, .m4a, .m4p, .m4b, .m4r, .m4v file types)." video wit audio works fine for me in latest firefox and chrome. no auto play though - and volume control seemed unresponsive in firefox (win 7)
Create an account or sign in to comment