I am hoping someone has an idea on what I can do to help me play HTML5 videos on my local intranet.
My Web server= Windows Server 2008 R2 Standard 64bit
IIS version= IIS7
Test User environment = Windows 7 Enterprise
Video plays perfectly using 'Google Chrome'
Video fails to play using 'IE10'
My html code is as follows:
<!DOCTYPE html>
<html>
<body>
<video src="AccReadings.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
My test machine using IE10 does play HTML5Rocks video 'http://craftymind.com/factory/html5video/CanvasVideo.html'
Regards,
Chris
Make sure you set the web server to use a MIME type video/mp4 for .mp4. I accidentally set .mp4 to use MIME type video/mpeg, the video plays in Chrome, but not in IE11.
Also you need to make sure the video uses H264 video codec and AAC audio codec
I just had a similar problem, my own site HTML5 did not work at all. No error message just blank.
The reason was Windows7 N (EU - no media player).
After installing the Windows Media Player, this (and also other problems) are fixed.
I hope it helps :)
It doesn't look like it works in Win7+IE10 for some reason. Everything else looks good. Tested against the following pages, which includes ie.microsoft.com test.
http://ie.microsoft.com/testdrive/graphics/videoformatsupport/default.html
http://www.w3.org/2010/05/video/mediaevents.html
Win7 IE9 – OK
Win7 IE10 – nope
Win8 IE10 – OK
Win7 IE11 – OK
Win8 IE11 – OK
BrowserStack screenshots for the MS test page.
http://www.browserstack.com/screenshots/9083c865675d0821ee8b1030a43da5fd36bff469
I don't have IE10 installed, however, according to caniuseit, mp4 is supported in IE9 and 10.
The following html works for me in IE9 & Chrome, note your video file must be in the same folder as your html page on the server (in this example).
<!DOCTYPE html>
<html>
<body>
<video src="abc.mp4" width="640" height="480" preload controls></video>
</body>
</html>
Edit: I have installed IE10 and can confirm the above works there too.
Edit: Since Firefox does not support mp4, and older browsers do not support video natively at all, it is better to provide multiple sources (formats), and fall back, usually to a flash player.
<!DOCTYPE html>
<html>
<body>
<video width="640" height="480" preload controls>
<!-- mp4 supported by Chrome & IE9/10 -->
<source src="abc.mp4" type="video/mp4"></source>
<!-- webm supported by Firefox -->
<source src="abc.webm" type="video/webm"></source>
<!-- last element in video is fall back for native video support, usually a flash player -->
<object type="application/x-shockwave-flash ...>
<!-- last element flash player is usual fall back for flash support, usually some "not supported text" -->
<div>
Your browser does not natively support flash and you do not have flast installed.
</div>
</object>
</video>
</body>
</html>
Maybe you have video card driver problem as mentioned in Cannot play neither IE10 HTML5 video nor Modern UI apps video.
Disable GPU rendering in IE as:
Internet Options > Advanced > Accelerated graphics > Use software rendering instead of GPU rendering
And see if it works.
I have had a lot of problems with IE10 playing html5 video.
The last thing I checked was the right oe : videos were gzip compressed.
Check your server config!!!
EDIT :
To know if your videos are getting compressed by the server, use a network proxy sniffer like Charles for example, or even IE's debugger and check the response header to the video file request. If you find Content-Encoding:gzip, then you should check your server config.
In my case I had to disable gzip compression on video files in my .htaccess file.
This is the code I use for my html5 videos:
<div>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="none" width="auto" height="auto"
poster="path/to/image.png"
data-setup='{"example_option":true, "autoplay": true}'>
<source src="path/to/video.ogv" type='video/ogg' />
<source src="path/to/video.webm" type='video/webm' />
<source src="path/to/video.mp4" type='video/mp4' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["path/to/image.png", {"url": "path/to/video.flv","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="path/to/image.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
This should work on all devices/browsers. I have called the wideos in that specific order to allow modern browsers to load them faster (chrome can play ogg/webm/mp4 - from testing my videos ogg/webm seem to load faster them mp4 so it will reduce buffering times)
I've had the exact same problem. My original resolution of the video was 1920x1200. Seems that IE10 has problems with that. First tests with lower resolution videos solved the problem.
Related
I have a webradio that like to put on the site.
I used the following code that works in Internet Explorer, but not in Windows 8.1 or the 64-bit MAC (iPad, iPhone ...)
<object classid = "clsid: 6BF52A52-394a-11D3-B153-00C04F79FAA6" width = "280" height = "100" codebase = "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf. cab # version = 5,1,52,701 ">
<param name="url" value="http://109.71.41.230:8658">
<param name="autostart" value="false">
<embed type="application/x-mplayer2" width="280" height="100" src="http://109.71.41.230:8658"> </ embed>
</ object>
The following code works on Mac, but also does not work on Windows 8.1 64-bit:
<audio preload="auto" autoplay controls="controls" src="http://109.71.41.230:8658/;">
</ audio>
I visited your page: Embedding Windows Media Player for all browsers
but also did not work.
There is some code that works on all browser's?
thank you
There is no such 'Code that works on all browsers' ;-)
You have to check what capabilities the browser has. For example flash or html5 audio or both etc. and deliver the proper code. That's not the easy way.
But you could use http://jplayer.org instead.
It's a HTML5 Player with Flash fallback and does all the checks for major browsers for you.
It supports:
Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
Windows (legacy): IE6, IE7, IE8, IE9, IE10, IE11
OSX: Safari, Firefox, Chrome, Opera
iOS: Mobile Safari: iPad, iPhone, iPod Touch
Android: Android 2.3 Browser
Blackberry: OS 7 Phone Browser, PlayBook Browser
and those media types:
HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
Flash: mp3, mp4 (AAC/H.264), rtmp, flv
I cannot get my mp4 video to play in Firefox - it simply says " No video with supported format and MIME type found". Here's my HTML...
<video poster="images/video.png" width="100%" controls autoplay>
<source src="images/polutionbbc.mp4" class="videoplayer" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
The video plays well in other browsers. I have read other similar questions here on Stackoverflow and some people are saying that FF just will not play mp4 video at all due to licensing...
Playing MP4 files in Firefox using HTML5 video
That assumed therefore, could anybody please suggest either a fix or an alternative video format that plays universally across browsers and how I would convert it?
I am hosting with hostgator and I have checked the list of mime types and mp4 is listed there so I dont think it is that.
You should use .ogg for firefox and opera, according to w3schools you can include both formats to make it work on all modern browsers
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Link: http://www.w3schools.com/html/html5_video.asp
Here you have some info about compatibility between video/audio formats :
https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats?redirectlocale=en-US&redirectslug=Media_formats_supported_by_the_audio_and_video_elements
I solved this - the commenter was correct I need to run both mp4 and ogg videos. To do this step-by-step including converting mp4 to ogg for free using VLC media player see this video http://www.youtube.com/watch?v=vNxb6bnTpP0
<video controls>
<source src="https://videocdn.whipclip.com/video/55eby.mp4?v=2" type="video/mp4">
<object type="video/mp4" data="https://videocdn.whipclip.com/video/55eby.mp4?v=2" width="568" height="320"/>
I'm sorry; your browser doesn't support HTML5 video in MP4 with H.264.
</video>
I'm using Win XP, service pack 3. I have an M4V video that I'm trying to embed in a web page using the HTML 5 video player found here -- http://videojs.com/. When I view this page through Apache 2.2, the video plays fine on Chrome and IE 7, but not on Firefox (just a black square without video controls) ...
<!DOCTYPE HTML>
<html>
<head>
<link href="css/video-js.css" rel="stylesheet" />
<script src="js/video.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="960" height="540" poster="css/video-js.png"
data-setup="{}">
<source src="videos/unpacking_w_students.m4v" type='video/m4v'>
</video>
</body>
</html>
Any ideas what may be going wrong? If there were some additional things I could add to the web page to help Firefox play it, that would be ideal, but if there is some other setting to adjust, that would be great to know as well.
Video.js should fall back to Flash when only using an mp4/m4v in Firefox, just like it does in IE7. Might be a dumb question, but do you have Flash installed in Firefox?
Otherwise, is it throwing any errors in the JavaScript console, or is there a live page we can look at?
You're only sending H.264 data.
Firefox doesn't have a patent license to ship an H.264 decoder, so it does not support that video format. It does support Theora and VP8.
Hey all,
I've got an HTML5 video on a page. When tested locally, Chrome, Safari, and Opera work beautifully. Firefox plays it, but doesn't loop as efficiently as the others. The real problem is when it's tested off a server. Firefox doesn't play the video, but recognizes there is one there. I was wondering if all that open ended three-different-ways syntax can be swung in Firefox's favor.
Thanks!
HTML:
<video id="vid_home" width="780" height="520" autoplay="autoplay" loop="loop">
<source src="Video/fernando.ogv" type="video/ogg" />
<source src="Video/fernando.m4v" type="video/mp4" />
Your browser does not support this videos playback.
</video>
take out the closing tag from your source tag, it should work then
I have an ogg/audio file converted from mp3 using Alt WAV MP3 Ogg Converter.
When I drag and drop the file in Firefox or in Google Chrome, the audio plays nicely.
But when a use the following code to place the file inside a page it only works on Chrome.
My code is simple as that:
<audio controls>
<source src="foo.ogg" type="audio/ogg">
</audio>
Someone can tell me why?
Thanks
I think you can find your answer here.
In my case I had to add MIME types to our nginx server.
Because this works on IE:
<source src="foo.ogg" type="audio/mp3">`
And this works on Chrome, Mozilla, Safari, Opera
<source src="foo.ogg" type="audio/ogg">