Below is the code I am using for the video tag. I basically copy and pasted it off of the Video.js website (then updated with my own file names). At first I could get Chrome to work but not Firefox or Internet Explorer. Then I changed the "webm" tags to "web". This fixed issue with Firefox, but I still can't get any playback with IE9. It just shows up as if it trying to load. Right now I am simply trying to test it out using local files in the same root folder, so I don't think it is an issue with waiting for it to download. My video files range from 8.1 to 8.4 meg.
If anyone has any ideas one how to get this to play, it would be greatly appreciated. Thank you in advance.
The following is in the head tag:
`<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf"`
</script>
The following is in the html tag:
`<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="bdg-vid-poster.png"
data-setup='{}'>
<source src="bdg112412hr.mp4" type='video/mp4' />
<source src="bdg112412.web" type='video/web' />
<source src="bdg112412.ogv" type='video/ogv' />
</video>`
I'm not sure why you changed the name from webm to web - webm is the proper extension to use. That line should read:
<source src="bdg112412.webm" type='video/webm' />
Do you have valid video files for each of the three video types (mp4, web, and ogv)? What happens when you drag and drop the mp4 directly into IE9? Try the webm in Chrome and the ogv in Firefox.
If you are not certain your video files are valid, try downloading the sample files here. (See the "Download Video" links under the video).
Also helpful for me was the preload="auto" had to be preload="none" or else it waited to load the entire video before playing...a real drag...
Check the mime-type configured on the server.
I had problems with mp4 and IE9. And i just had to change the myme-tipe from video/mpeg to video/mp4.
Related
I'm having some trouble displaying HTML5 video in IE9, I added the different types to my htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
This is what I have as html
<video id="video" autoplay loop preload>
<source src="video/final_loop.mp4" type="video/mp4" />
<source src="video/final_loop.webm" type="video/webm" />
<source src="video/final_loop.ogg" type="video/ogg" />
Your browser does not support the <code>video</code> element.
</video>
I also tried converting the video to Theora ogv format and use
<source src="video/final_loop.theora.ogv" type="video/ogv" />
But this doesn't work either, I thought .ogg was supported in IE9?
Internet Explorer 9 support MPEG4 using H.264 codec. But it also required that the file can start to play as soon as it starts downloading.
Here are the very basic steps on how to make a MPEG file that works in IE9 (using avconv on Ubuntu). I spent many hours to figure that out, so I hope that it can help someone else.
Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4
This video will works on all browsers that support MPEG4, except IE9. To add support for IE9, you have to move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!
qt-faststart pre_out.mp4 out.mp4
qt-faststart is a Quicktime utilities that also support H.264/ACC file format. It is part of libav-tools package.
Are you trying to use this on IIS?
If so, you have to add the appropriate mime types to recognize your video files:
<configuration>
<system.webServer>
<staticContent>
<!-- Video -->
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
</staticContent>
</system.webServer>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>
Here's some markup that works for me in IE9 (in the root folder, i have a "video" folder with my files):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video Demo</title>
</head>
<body>
<video id='movie'
autoplay
controls
loop
preload=auto
playbackRate="1"
width="800">
<source src="video/video.mp4" type='video/mp4' />
<source src="video/video.webm" type='video/webm' />
</video>
</body>
</html>
As others have mentioned, IE9 doesn't support OGV, only MP4 and WebM (with plugin). I encountered a lot of trouble even with the MP4, which should play natively, before finding out that one thing to consider when serving MP4 files for IE9 is the file meta information called moov atom embedded in the MP4 file itself. If it's located at the end of the file, where some encoders including ffmpeg places it, IE9 will not start playing the video unless the whole video file downloaded. Relocating the moov atom metadata to the beginning of the file enables progressive download of the MP4 file, and IE9 handles the video nicely.
There's a tool called qt-faststart to perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.
make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
See this page; it provides a solution to the poster issue with IE9, and expands on video codecs:
Some simple CSS and conditional statements did the trick. I'm now of the opinion posters should be placed at the beginning (first frame) and end (last frame) of a video, as if they were album covers. In this way, an image at the beginning and end of the video will give the viewer SOME visual idea of why they should play the video (just like the reason you buy an album sometimes is because of the cover).
Please be aware that for IE9, the video source must be given in the 'src' attribute of the video tag itself.
I suggest that you detect IE9 specifically and add that property to the video tag. You need to do it specifically for IE9 because Firefox on OSX won't accept the MP4 video file in src tag.
Hope it helps!
IE9 does not support Ogg/Theora. It will support WebM if you install the codec.
On the official Microsoft website there is this code snippets for video on IE9
<video width="400"
height="300"
src="video.mp4"
poster="frame.png"
autoplay
controls
loop>
This content appears if the video tag or the codec is not supported.
</video>
Try with this code.
I'm trying to play a Quicktime .mov file (wrapping an H264 video) in a browser using video.js. I've created a new Typescript project in Visual Studio 2012 and referenced the video file in a very simple html file adapted from the demo file downloaded from http://www.videojs.com/.
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
data-setup="{}">
<source src="media/somevideo.mov" type='video/mp4' />
</video>
</body>
</html>
Unfortunately this doesn't appear to play in either Chrome or IE (I haven't tried other browsers). I've tried changing the type to type='video/quicktime' with no luck, and I've tried to remove the type attribute all together. In the former case the video 'loads' forever. In the second scenario, text appears at the top of the video object telling the used to download the latest version of Flash.
I've got a feeling this may be a MIME-type issue, but am not sure how to fix it. Does anyone know how to resolve this?
Steve
EDIT I'm going to give up on this. I've decided I can batch convert to H264 and create some metadata to extract the extra information I need. This makes life much easier that relying on video.js interacting with QT.
Different devices (and browsers) require different video formats. In the past, I've managed to get full support by using this service. However, you might be able to do it yourself with ffmpeg.
As you can see from the html source at videojs, multiple video file formats are included.
<video id="home_video" controls preload="none" poster="/img/poster.jpg" class="video-js vjs-default-skin">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<track kind="captions" src="/vtt/captions.vtt" srclang="en" label="English"></track>
</video>
My HTML5 video player won't play a file longer than one hour. Here is my code:
<video src="/Movies/MP4/Blaa.mp4" controls="controls"></video>.
I am quite new to HTML5 so i am asking what the problem could be? Any answers are appreciated.
-Simon
It looks like you're only using a single mp4 file, so I'm not sure if this will help, but I was able to solve my problem by switching the order of my source files. From what I can tell, Chrome is able to play H.264 video (which is what is usually contained within the MP4 wrapper), but it is unable to play MP4 files. I'm guessing that they finally removed support for MP4 like they've been saying that they were going to.
Here's what my code used to look like:
<video width="640" height="360" controls>
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
From my understanding, when a browser tries to render an HTML5 video tag, it's supposed to skip over any source tags that it can't play, and attempt to play the first one that it can. For whatever reason, Chrome is not currently doing that. It's trying to play the MP4 anyway, and failing.
Even the video on the "Video for Everyone" page is failing for me now.
My solution was to switch the order of the source tags so that the webm video came before the mp4 video:
<video width="640" height="360" controls>
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
So far this has fixed the problem. Chrome now plays the webm file with no issues, and all other browsers I have tested still seem to work fine.
The only possible problem that I still need to test for is that I've read that the iPad had a bug that required the MP4 source to be listed first. I'm working on getting my hands on an iPad to see if that's still an issue.
For now, this solution fixed my problem.
Hope that helps!
The problem was that chrome won't play MP4 movie files at the moment. Safari is the only working browser right now.
I have a strange issue with a html5 video. It's working correctly in all browsers except in Internet Explorer. Internet Explorer 9 is always waiting for the video to be fully downloaded until playback starts. If I open the Video in Firefox, Chrome or even Opera everything is working fine.
The code snippet looks as following
<video id="video-js-10734" class="video-js vjs-default-skin" width="640" height="480" controls="controls" autoplay="enabled" data-setup="{}" poster="1"><source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_libtheora.ogv" type="video/ogg" /> <source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_x264.mp4" type="video/mp4" /> </video>
Did I forget about some keyword configuration or is this a "feature" in Internet &*°ç&*ç! Explorer?
Thanks a lot
It sounds like IE doesn't use the same file as other browsers.
I don't remember if IE support OGV files but if not IE should use the mp4 file you provide. It seems then your mp4 hasn't a delay set for autostart.
I have used sometimes a program called MP4box to mux or demux the file so it can start without loading everything.
May be IE doesn't support progressive download for type="video/ogg". Only for H264 and WebM. However you specidy the mp4 file. Try use type="video/ogg" and .ogg file as last option and type="video/mp4" and .mp4 file as first one.
I tried a simple example for HTML5 but it doesnt seem to work.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls autoplay">
<source src="resources/sample/sample1.mp4" type="video/mp4" />
</video>
</body>
</html>
I tried the example on chrome, the video loads up, but it does not play, i can see the video frames if i move the slider to and fro but the video itself doesnot play.
UPDATE:
I accessed this on localhost(tomcat), its still reacting in the same way.
Also i noticed that i am not able to play any HTML5 videos on chrome or firefox(updated).
Add "controls" as a flag. It allows the browser to run it's own player code on the video. I tried this with a .mp4 file on Chrome and it works.
I do not agree with Alex Pereora. It can be loaded from local machine just by referencing file names and or paths.
I had similar issue, and turned out IIS in Win 7 Pro does not have mp4 in it's mime types. Must add add the mime type. see instructions for adding mime type in link below.
html5 video is not playing mp4 error "Invalid Source"?
I faced the same issue now. I am getting the src of the video dynamically and asynchronously using ajax.
The issue was that the <video> element was getting loaded before the src. If we put the <video> element into the DOM after the src is loaded then the issue will get fixed.
In case of Angular we can use *ngIf to fix the issue. Below is Angular code snippet:
<video autoplay *ngIf="src" class="thumbnail">
<source [src]="src" [type]="type">
</video>
What worked for me was to convert the mp4 format from V1 to V2:
ffmpeg.exe -i old.mp4 -brand mp42 new-v2.mp4
You can't load a localfile like that with the HTML5 Video tag.
You'll have to use a localhost or a distant hosted file. Try to install mamp/wamp and load it through the virtual host.
<source src="http://localhost/development/programs/html/html5/sample/sample1.m4v" type="video/mp4" />
use both format it works fine in all browser:
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>
If your type of video is MP4 running on IIS/.NET
Add a web.config file to the root of the application web.config with the following contents
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="application/mp4" />
</staticContent>
</system.webServer>
</configuration>
add autoplay loop to video tag for play automatically as follows:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay loop>
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>
Video not playing in server because the mime type is not added in IIS.
To add Mime Type :
• Go to IIS and select your site
• Click Mime Types Under menu and click Add on right side tab
• Under File Name Extension add mp4,under Mime type add video/mp4 and click Ok.
• Restart IIS ,Now run the application
Try to set a relative uri for your video. The "D:/…" only works on windows locally and not in all browsers.
Chrome: Does the file contain audio as well? If so and you are playing it on desktop, connect the speakers to the desktop and check.
Firefox: H.264 content is not supported
IE9: The following should be added to your page <meta http-equiv="X-UA-Compatible" content="IE=edge" />
It may be due to video encoding.Check the encoding of your video and see if Chrome supports that.It may be a possible reason as I faced it.
Try some encoders like ff-mpeg to encode videos.
I got this problem when hosting on IIS, and found the solution Here.
In my case, even putting complete video URL on Chrome would give me 404 error, because the MP4 MIME type didn't exist on site config. So, I added .mp4 with MIME video/mp4, and all got right. Dunno if that's the same with tomcat, but that's worth a try...
Just set controls as a flag, not as a key=value pair:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>
Just be sure that you had inserted the video path correctly. Your 'resources' folder and the page where is the video tag must be at the same folder.
This approach will surely work. If this works plz upvote my answer.
<video width="50%" height="50%" loop muted id = "autoplay">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
window.onload = function(){
document.getElementById("autoplay").play()
}
</script>