bigvideo.js not playing full screen video - html5-video

please refer to the following URL:
full screen video link
I have my .htaccess configured as follows:
AddType video/m4v .m4v
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
However the video still does not play in Chrome or Firefox. In the console there is written Video Error. In IE it plays OK though.
Can anyone help me please as I am lost on this?

Check Browser compatibility at
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility
For cross-browser solution, you need to use ogv and webm format too

Turned out it was a limitation on my laptop. Maybe an old video card which could not render the video correctly. On other newer systems it played fine. I just added a fallback image in cases where the video is not supported.

Related

Video cannot play in Ipad, but can play on desktop with using html5 video tag

I'm using the html5 video tag to display the video call from database, but the video cannot display properly on ipad, just can display on desktop. Is it the video I calling by file path from my file server cannot support by my ipad?
Because i have do one exaple just place a video in the same folder with my .aspx file which are use to call the video. It can be work.
Example call in same folder:
<video id="myvideo" src="a.mp4" controls="true" width="703" height="400" type="video/mp4"></video>
Example call from file server:
<video id="myvideo" src="\\10.200.1.90\tgm_navi_fs\eNotice\General Notice\Article\UploadedVideos\11_140327133434_Nanotips.mp4" controls="true" width="703" height="400" type="video/mp4"></video>
src="\10.200.1.90\tgm_navi_fs\eNotice\General Notice\Article\UploadedVideos\11_140327133434_Nanotips.mp4"
It looks like the problem is that the iPad thinks you're trying to access a local file, and iOS doesn't allow users direct access to the local file system. (You'll notice, iOS apps don't generally ask you to load or save work in a folder the same way desktop apps do.)
You probably need to set up a HTTP server (a.k.a. "web server", like Apache, etc.), either on the file server itself or on another machine that has access to the file server. Then you need to change the URL to use the http protocol.
So, for example, let's say you set up your web server on the file server machine and set the root to "\tgm_navi_fs\eNotice\General Notice\Article\". The video tag would then look like:
<video id="myvideo" src="http://10.200.1.90/UploadedVideos/11_140327133434_Nanotips.mp4" controls="true" width="703" height="400" type="video/mp4"></video>
There can be a lot of reasons why the video isn't playing.
You should always provide (a piece of) your code with your question so it's easier to see what is going on.
A few things that might help you:
The HTML5 video tag is not properly set up. Look at the code at Video for everybody!. There is also a lot more info on HTML5 video's in general.
The video doesn't have the right encoding for iOS (iPad). Try Miro Converter on you MP4 to convert it to an iOS compatible MP4.
The server is sending a wrong or no MiME type. Make sure you are sending the right MIME types by putting the following in your .htacces for example.
.htaccess video MIME Types:
AddType video/mp4 f4v f4p m4v mp4
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
The flv is usually used for a Flash fallback by plugins like MediaElementJS.

Browserstack Win7 IE10 not playing HTML5 videos

I've been building a website that uses HTML5 video. I started testing with Browserstack and everything looked good, until I got to Windows 7 IE10. Any video element simply wont load the .mp4 on Browserstack. It just shows a blank screen.
Examples of sites when testing:
http://html5demos.com/video
http://www.videojs.com/
Has anyone experienced this on Browserstack or is this a real Windows 7 IE10 issue?
I also have the same problem and contacted Browserstack.
They are aware about the problem and looking for a way to fix it (it is not as simple as somebody forgot to install something). Currently it works fine on Win 8 in IE10.
This is not a real issue on windows 7 in IE10.
BrowserStack has acknowledged this as an issue when testing IE 10 and 11 on Windows 7.
HTML5 videos work on all remote browsers, with the exception of Internet Explorer 10 and 11 on Windows 7.
Source: https://www.browserstack.com/question/649
HTML5 video does play fine on Windows 7 with IE 10 and 11. I can also confirm Sauce Labs doesn't have any issues playing video.
This Problem is not related to Browserstack Win7 IE10 , even on physical machine i am facing this problem . This is due to Content type add these.
If your hosting is served on a Linux/Apache web server, often you can add MIME types to an .htaccess file and upload it to your remote site's root folder.
Video:-
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

WebM Video won't play in Firefox 4

I cannot get this video to play in Firefox 4.
http://m1.animedlc.com/webm_test/
It plays fine in Chrome. I haven't tried anything else besides FF4 and Chrome. I converted it from a avi file. Any idea? Thanks.
A little more research told me to add AddType video/webm .webm to my .htaccess and that worked fine.

HTML5 Video Error - Internet Explorer 9

I am trying to get a .m4v video to play in IE9 using html5 video tags. When I play the video from a remote location it works fine:
<video src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" controls="controls">
</video>
But when I want to play it from my server...
<video src="Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" controls="controls">
</video>
...it only works in Chrome and not in IE9.
What could cause the video not to play when located on my server?
Many thanks,
Chris
I have found the problem. IE9 RC was seeing the video as plain/text and not video/m4v so it was not able to play. Chrome and IE8 read the file correctly.
Adding AddType video/x-m4v .m4v to my htaccess made sure IE9 RC was able to read it as a video/mp4 file.
Crazy eh?
In order for your server to associate the correct MIME types with the application, you will need to include the MIME types into your htaccess file.
Here is an example of several MIME types that you can include within your .htaccess file:
#Video MIME Types:
AddType video/m4v .m4v
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
In addition to needing the server to send the correct Content-Type header for the requested video file itself, you should consider using a child <source> tag instead of the src attribute, eg:
<video controls="controls">
<source src="Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" type='video/x-m4v; codecs="..."'>
</video>
That will allow you to specify up-front the actual video type information so the browser can decide whether to even download the file at all. As well as give you flexibility to offer additional video types later on, if desired.

How to add mime-type for <video> element on Firefox?

Into this dir there are :
OGV video (Theora/Vorbis) for Firefox
MP4 video (H264/AAC) for Safari
FLV video with a flash player (player.swf) for others browsers
a template.html which contains a snippet coming from Video for everybody
a .htaccess to add the new types of video
Locally the video is correctly displayed on all browsers.
But online Firefox doesn't display the video and ask for a download. Though the mime-type is correctly set in my .htaccess.
Any idea to fix this problem on Firefox ? (I use 3.5.3 release on Windows).
Thank you. :)
Note: it sounds that this problem doesn't appear on Ubuntu.
Edit : my Firefox installation was bugged. Now it's working correctly. Thank you Rudism. :)
It may be worth trying it in Google Chrome which support video/ogg as well. May help you debug...