Can I vent for a minute -- Mozilla released Firefox 21.0 not long ago and it's supposed support for H.264 video is confusing to say the least.
I noticed that FF21 changes the HTML5 video tag to an object tag when the page loads.
This code that I wrote ...
<video controls='controls' preload='none' width='320' height='240'>
<source src='test.mp4' type='video/mp4' />
</video>
... automagically becomes this code after the page loads ...
<object width="320" height="240" type="application/x-ms-wmp" uimode="full">
<param name="autostart" value="false">
<param name="url" value="test.mp4">
</object>
Why does FF21 change the code from VIDEO to OBJECT? I'm on Windows 7, so I'm not surprised my HTML5 video becomes an IE player -- but is this true HTML5 support?
By the way, this isn't a big deal if you've hard-coded the URL of the video file into the source attribute. But if you're loading the video dynamically, does this mean developers have to start manipulating the PARAM/URL attribute instead of the VIDEO/SOURCE attribute IF the user is using FF21+ on Windows7? My if/else statements for loading the proper video file are growing with every new browser release/upgrade.
Running FF21 on Windows 7 here - not seeing this behavior. The page loads, the video plays and Firebug shows the video tag intact. Could this be caused by an add-on / extension?
Related
The volume control in HTML5 videos on my website is not appearing, see screenshot: The video plays when started, but without any sound. The videos also play fine (with sound) in VLC and Windows Media Player.
I have tested in Chrome (65.0.3325.162), Firefox (59.0.1), and Android (on a Samsung tablet). The volume of my system is fine with other applications, and YouTube videos.
Here is the (minimal) code (adding additional attributes like height and poster etc. makes no difference to the problem):
<!DOCTYPE html>
<html lang='en'>
<body>
<video controls src='vid1.mp4' width='500'>
</video>
<video controls width='500'>
<source src='vid2.mp4' type='video/mp4' />
</video>
</body>
</html>
Am I missing something obvious?
[1]: https://i.stack.imgur.com/qAl7D.png
EDIT:
When I tested with a sample video on http://techslides.com/demos/sample-videos/small.mp4 the controls appeared. It seems to have something to do with the encoded mp4 video itself.
I have now removed the video urls. I re-encoded the videos using VLC, and they are now working correctly.
Why are these HTML5 video problems cropping up now after 5+ years?
TLDR: Your code routes around video content farms and their ad-click revenue by short circuiting MP4 content and eyeballs per second, this is retaliation. It's par for the course.
Browser developers have busted your HTML5 <video> browser embed code, either on purpose or by accident around the codecs needed to decode them. They own the source code of the browser that interprets and decodes your HTML5 MP4 file for presentation in the browser content area. Chrome developers corner the market on MP4 Videos and had their arms twisted by the powers that be. So the browser sees that the codec required to decode your MP4 is likely from an unauthorized area, and thus here we are scratching our heads as to why chrome isn't showing a volume button.
My requirements has to be that HTML5 Video is fixed on server side, I can't require users to fiddle around with their chrome flags or installing a plugin that corrects the bug. It has to just work by default on the latest Chrome, Safari, Firefox then IE, preferably in that order.
Screenshot of the case of the missing HTML5 video volume button:
The video plays, but at zero volume. No volume button is ever presented either during initial load, nor during or after playback. The mp4 download and go-full screen buttons are presented and work correctly during playback.
And yes, the chrome flags for new media player are disabled:
What it looked like before, what I expect to see:
The stripped down code I'm using:
This code was evolved from the likes of: http://camendesign.com/code/video_for_everybody
<html><body>
<video width="640"
preload="none"
height="360"
poster="some_content.png"
controls="controls">
<source src="some_content.mp4"
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D348
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=_
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br>
MPEG4
Ogg Theora
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
</body></html>
The above code is the code that used to work, but got broken.
Final solution that worked for me: Manual clean of the 3rd party taint from my MP4 videos.
There are many options to clean and re-encode an MP4 video, some free others non-free. One way is open the MP4 file with VLC or other video player or software that has and open/save/reencode/convert tools in it, and save it out to a different video encoding format.
I was able to cook up a handy dandy script in Java to iterate over every MP4 file crack open the MP4 file, clean out the hobo taint if it exists then save and redeploy the mp4 file, and now all is well. Then do this on a schedule.
Other solutions considered, but rejected:
Eliminate the bugged HTML5 video embed tag from your tool set. Display an image with an html5 <img .../> tag, overlay a play button so as to indicate this is a video, when the user clicks either open a new tab where the raw MP4 video plays in browser: the volume button is shown correctly, or worst case the user downloads the MP4 video to disk, and they can open it up from disk with their video player.
Use a different browser or an open source browser, that know how to do the right thing.
Try toggling on the 'new media controls' chrome://flags, maybe at some point in the future the Chrome Devs will push a fix and it won't freak out on the evidence that the mp4 smells of digital rights violations.
Yield the vanguard and eyeball click revenue to the big player content providers, just use an whatever tag to redirect users to the websites who are able to show video correctly.
The game is afoot make your time.
It seems that you are using a mute video. Because of that, the volume control is not showing.
Check this out:
<video src='https://www.w3schools.com/tags/mov_bbb.mp4' controls>
</video>
I have a video archive that I have working in everything except IE 11. I get the error "Error: Unsupported video type or invalid file path" when loaded in IE 11. Below is the HTML I am using.
<video id="movie" width="640" height="400" autobuffer controls preload="auto">
<source src="/media/Archive_Videos/September%202013/September_13_U-RUN.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/media/Archive_Videos/September%202013/September_13_U-RUN.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="/media/Archive_Videos/September%202013/September_13_U-RUN.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="640" height="360">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&file=SITE%2Fmedia%2FArchive_Videos%2FSeptember%25202013%2FSeptember_13_U-RUN.mp4" />
<span title="No video playback capabilities, please download the video below">September 2013 U-RUN</span>
</object>
<p>OOPS! It looks like your browser doesn't support HTML5 videos. You can either install the latest version of your browser or download the video below:
<br />MP4 format | Ogg format | WebM format</p>
</video>
I also have an .htaccess file so it works in Firefox.
AddType audio/ogg oga ogg
AddType video/ogg ogv
Why isn't it working in IE 11?
What is the resolution of the video? I had a similar problem with IE11 in Win7. The Microsoft H.264 decoder supports only 1920x1088 pixels in Windows 7. See my story: http://lars.st0ne.at/blog/html5+video+in+IE11+-+size+does+matter
I believe IE requires the H.264 or MPEG-4 codec, which it seems like you don't specify/include. You can always check for browser support by using HTML5Please and Can I use.... Both sites usually have very up-to-date information about support, polyfills, and advice on how to take advantage of new technology.
I've been having similar issues of a video not playing in IE11 on Windows 8.1. What I didn't realize was that I was running an N version of Windows, meaning no media features were installed. After installing the Media Feature Pack for N and KN versions of Windows 8.1 and rebooting my PC it was working fine.
As a side-note, the video worked fine in Chrome, Firefox, etc, since those browsers properly fell back to the webm file.
I know this is old, but here is a additional thing if you still encounter problems with the solution above.
Just put in your <head> :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It will prevent IE to jump back to IE9 compatibility, thus breaking the video function.
Worked for me, so if you still have problems, consider checking this out.
Alternatively you can add this in PHP :
header('x-ua-compatible: ie=edge');
Or in a .htaccess file:
header set X-UA-Compatible "IE=Edge"
Although MP4 is supported in Internet explorer it does matter how you encode the file. Make sure you use BASELINE encoding when rendering the video file. This Fixed my issue with IE11
It was due to IE Document-mode version too low. Press 'F12' and using higher version( My case, above version 9 is OK)
In my case Codec ID of mp4 file was the issue, Codec ID: isom (isom/iso2/avc1/mp41)
was not playing in IE 10 and 11 using video tag, after I converted it to "mp42 (mp42/isom/avc1)" using FFmpeg it started playing in IE as well.
I used MP4Box to decode the atom tags in the mp4. (MP4Box -v myfile.mp4) I also used ffmpeg to convert the mp41 to mp42. After comparing the differences and experimenting, I found that IE11 did not like that my original mp4 had two avC1 atoms inside stsd.
After deleting the duplicate avC1 in my original mp41 mp4, IE11 would play the mp4.
How does the HTML5 video tag eliminate the need for plugins. What does the video tag do in addition to the previously used tags like embed and object that removes requiring a plugin? Please explain in detail.
A little gotcha on video and IE9. A client supplied the .mp4 video. We got it working on a website with the .ogg options and the flash object fallback for non-HTML 5. Everything was fine and dandy and working beautifully under XP fully updated to the lastest IE. So IE fine. Chrome fine. Firefox fine. Tablets fine. Website looked great.
Then we had a complaint - the video wasn't showing. Someone using Windows 7 and IE, again fully updated, couldn't see the video.
It turns out the client hadn't encoded the .mp4 as a H.264 format video and our fully updated XP system was only running IE8 (WinXP doesn't have IE9) and falling back gracefully to Flash. Chrome was fine with .mp4, FF with .ogg. But it turns out IE9 was reading the tag, but unable to read the .mp4 file - so no fallback to the Flash, just the red-cross. The solution was to re-encode the .mp4 (Miro used) so it had the proper codec.
The moral is if in doubt on IE9, check the .mp4 file has been encoded to the right format.
How does the HTML5 video tag eliminate the need for plugins
Browsers that support HTML5 players have ability to shown the default or built-in player when using <video> tag.
What does the video tag do in addition to the previously used tags
like embed and object that removes requiring a plugin?
The <video> tag does nothing to other/old tags but it does provide you an option for the fallback. If a browser does not support HTML5, they will fallback to old methods such as <embed>, <object>. Here is an example:
<video controls
preload="none" width="590" height="320"
data-setup="{}">
<source src="Real_Media.theora.ogv" type='video/ogg'>
<!-- fallback for older browsers -->
<object width="590" height="320">
<param name="movie" value="http://www.youtube.com/v/Z7pAr39ZnhA&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Z7pAr39ZnhA&hl=en_US&&autoplay=1;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="590" height="320" wmode="transparent"></embed>
</object>
</video>
As you can see, we have specified <object> tag inside <video> tag. Though it is optional but you need to specify it for browsers that don't support HTML5. In above case, if a browser supports HTML5, the <video> tag will be used and <object> tag will be ignored and vice versa.
For in-depth details about HTML5 video, take a look at:
Dive Into HTML5 - Video Tag
Have a look at: http://html5media.info/ To include a one line .js to support <video> and <audio> tags in all major browsers and phones:
I am designing a site for an ad production company that want to be able to upload location scouting and casting videos. I have figured out how to get the data out of sql and into the browser with proper headers.
Now my issue is - what is the best way to display video at present. I need it to work on iPhones, iPads, Safari and Firefox. I don't care about IE at all.
I don't mind restricting them to uploading in only one video format if that helps. Meaning Quicktime .mov only or .m4v only - whatever works. Can't use Flash as iPhones and iPads are involved.
I also have no issue accommodating each different browser with different code. I just need to know which method is best for which platform/browser.
EDIT:
I have figured out how to display the video from the database in the computer browsers I care about (excludes MSIE). Now I need to figure out the iPhone. To test, I put the files into the server's files system and they all play from there via the html5 video tag. So the iPhone is capable of playing the clips' formats. The issue is apparently passing that data to the iPhone from mySQL... Currently, my php file that retrieves the binary data and sends it to the browser specifies the following headers:
header("Content-length: $audioLength");
header('Content-Range: bytes 0-'.$audioLength.'/'.$audioLength);
header("Content-type: ".$mimeType);
where $audioLength is the file size in bytes captured on upload
$mimeType is the mime type as reported by the browser at upload - both values are passed to the retrieve_audio.php script form the database along with the binary data.
What other headers may be necessary? How would I find out what the difference is between getting the file from the filesystem versus the database?
Is is possible the issue is that the iPhone doesn't retrieve the data until you press the play button? As a last resort, I could have the PHP code write the file(s) to the filesystem, but that is duplication of data that I would like to avoid, if possible...
Thanks,
M
Check out http://diveintohtml5.ep.io/video.html for great info on HTML5 video and different formats.
Simplified short answer: Firefox 4 supports Ogg (Theora/Vorbis) and WebM; Safari (desktop and mobile) supports MP4 (H.264/AAC). Try using the HTML5 <video> tag like this:
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
(Example from site linked above. Seriously, it's a really good read, and it will also tell you how to make sure your video does work in IE, Chrome, etc.)
EDIT If you absolutely need to only use one video format, your best bet is probably MP4/M4V with H.264 video and AAC audio. Safari (desktop and mobile) can play it in the <video> tag, and Firefox will be able to play it in a Flash container. It's not ideal, because I think you'll have to do some browser sniffing to make sure iOS doesn't get Flash and Firefox does, but you'll want something like this:
<!-- Safari and iOS -->
<video width="320" height="240" poster="poster.jpg" controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<!-- Firefox / other -->
<object width="320" height="240" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="player.swf">
<param value="true" name="allowfullscreen">
<param value="always" name="allowscriptaccess">
<param value="file=video.mp4&image=poster.jpg" name="flashvars">
<embed
width="320"
height="240"
flashvars="file=video.mp4&image=poster.jpg"
allowfullscreen="true"
allowscriptaccess="always"
src="player.swf"
type="application/x-shockwave-flash"
>
</object>
Even if you go this route, though, I'd still read the Dive Into HTML5 page for more info about the appropriate codecs to use, how to encode the video, and various problems to look out for.
Unfortunately there is no single format that works well on such a wide variety of devices. You'll need to take whatever format is uploaded and convert it into a number of different formats. You might want to look into a service like http://www.livetranscoding.com/ to do the heavy lifting (note, I've not used their services and I don't know if there's a way to get it to work with non-live streams).
I'm looking for a way to broadcast a live video taken from a webcam or camera rooted to a PC.
The broadcast should be displayed in a HTML5 page using the tag (which support rtp, and rtsp I think).
The user viewing the stream should not have to install any plug-in or video player such as QuickTime.
I need the video to be in mp4 format such as: rtsp://www.mywebsite/streaming/video.mp4
This would be the link I'd put as the src of the html 5 video tag.
So I'd like to know if it's possible, what are my options to do such things.
It's possible. But you will have major problems if you're looking for cross browser support. What you can do is offer HTML5 video to the browsers supporting it and then offer QuickTime for browsers not supporting it.
<video src="stream.mp4">
<!-- Don't support <video> -->
<object>
<param name="src" value="video.mp4" />
<param name="autoplay" value="true" />
<param name="type" value="video/quicktime" height="256" width="320" />
<embed src="video.mp4" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" />
</object>
</video>
Also see: Streaming via RTSP or RTP in HTML5
I don't think it is possible now to "cheat" the HTML5 browser to encapsulate the live video stream to a ".mp4" file.
I believe HTML5 will consider live video support in a near future.
What you can do is just wait. :)
For maximum compatibility, here’s what our video workflow will look like,
Make one version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container & Make another version that uses WebM (VP8 + Vorbis) or Theora video and Vorbis audio in an Ogg container.
I think this combination solves your problem & it plays on most of browsers.
You should required at least two versions of Video to play in all the browsers.