I am trying to make a MKV video with a MPEG4 video codec and AC3 audio codec available to be played online using Mozilla or Chrome. I have tried multiple methods including native HTML5, which plays back the video but no audio and from what I've read AC3 is a proprietary codec so it is not included in the supported codecs. The code for that was as follows:
<video width='1024' height='768' controls autoplay>
<source src="path_to_src" type='video/x-matroska'>
</video>
I then tried to use the VLC web plugin (as I know VLC can play the files correctly) but have not yet gotten it to play any file, there doesn't seem to be a lot of consistency in the examples for using this method. Here is what I have tried so far using the VLC plugin:
<embed type="application/x-vlc-plugin" version="VideoLAN.VLCPlugin.2"
width="1024" height="768" id="vlc" autoplay="yes" target="path_to_file"></embed>
The VLC page here says to add this:
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
But the codebase doesn't seem to exist anymore and adding that classid to the code above has no effect on the playing of the file. Both methods result in the VLC player box being made but nothing ever getting played and the developer console doesn't show any errors.
So my question is does anyone know a workaround to get AC3 audio to play in the native HTML5 player or what the correct syntax is for the VLC web plugin? Or does anyone have a different player altogether they would recommend? Any and all help appreciated!
HTML5 does not support .mkv / Matroska files but you can use this code...
<video>
<source src="video.mkv" type="video/mp4">
</video>
But it depends on the browser as to whether it will play or not. This method is known to work with Chrome.
You can use this following code. work just on chrome browser.
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Amin Developer!" />
<title>Untitled 1</title>
</head>
<body>
<p><video src="http://jell.yfish.us/media/Jellyfish-3-Mbps.mkv" type='video/x-matroska; codecs="theora, vorbis"' autoplay controls onerror="failed(event)" ></video></p>
<p>Download the video file.</p>
</body>
</html>
To use video extensions that are MKV. You should use video, not source
For example :
<!-- mkv -->
<video width="320" height="240" controls src="assets/animation.mkv"></video>
<!-- mp4 -->
<video width="320" height="240" controls>
<source src="assets/animation.mp4" type="video/mp4" />
</video>
My answer may be incomprehensible to you, so if you do not understand, click on
this
<video controls width=800 autoplay>
<source src="file path here">
</video>
This will display the video (.mkv) using Google Chrome browser only.
HTML5 and the VLC web plugin were a no go for me but I was able to get this work using the following setup:
DivX Web Player (NPAPI browsers only)
AC3 Audio Decoder
And here is the HTML:
<embed id="divxplayer" type="video/divx" width="1024" height="768"
src ="path_to_file" autoPlay=\"true\"
pluginspage=\"http://go.divx.com/plugin/download/\"></embed>
The DivX player seems to allow for a much wider array of video and audio options than the native HTML5, so far I am very impressed by it.
Related
My markup is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
</head>
<body>
<div id="slider1">
<div class="flexslider">
<ul class="slides">
<li class="list" data-video="vid/scene1.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene2.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene3.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene4.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene5.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
start:animation,
after:animation
});
});
function animation(slider){
var myVideo=$('.flex-active-slide video').get(0);
myVideo.playbackRate=1.0;
myVideo.play();
}
</script>
</body>
</html>
I have converted my initial movie files to .mp4 using some free converters online.
I can play in quicktime player but unable to play on safari browser.
I have tried using various formats .ogg,.webm but failed.
Please suggest the appropriate way and also the videos are playing fine in all other browsers.(Chrome,Firefox)
A couple of things you could try:
I can see that your trying to auto play the video on page load. So if you are trying to view the video on iOS it will not play because Apple only allows playback on user interaction (like a touch event). You can read there for more information.
If it does not work on Safari desktop then it could be an issue with the MIME/TYPE on the server where your MP4 are hosted. You can begin to read here or Google around for more information. I would try to play a simple HTML5 video tag in Chrome with the mp4 to rule this one out. If it plays in Chrome then it is not a MIME/TYPE server issue.
Having an HTML5 doctype could also help: <!doctype html>
Safari will not play .webm or .ogg video files. You should stick to mp4 for Safari. If it is an encoding issue trying a software like handbrake could solve your issue.
Also you would need a recent version of Safari and Quicktime to be installed on your PC to play HTML5 video so an update or fresh install may solve your issue.
I hope this put you in the right direction.
Thanks
In delivering content to the Safari browser, we have found that the browser, upon noticing multimedia content to be downloaded, will first send an extra request, which includes a Content-Range header, to the web server to ascertain the size of the content to be delivered. If the server does not respond correctly, the browser will not download and play the content. This extra request/response is defined in, but not required by, the HTML spec.
In our experience, this has been true for Safari on a Mac and just about any browser that we tested on an iPad. However, Safari for Windows appears to play fine even without this extra exchange between the browser and the server.
If this is the problem you are seeing, the player control will be displayed in the browser window, but the the content will never start playing. No error or other message, just a blank player control.
In this case, you will need to look to your server for the answer. If the server is yours, as our is, you will need to add this additional piece to respond to the browser request for media size, i.e. to respond to the Content-Range header in a browser request. If the server is from someone else, ask them if they support this. Again, in our experience, not all servers do.
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>
Using the new HTML audio tag:
<audio autoplay="autoplay">
<source src="../../audio/andromeda_oars.ogg" type="audio/ogg" />
<source src="../../audio/andromeda_oars.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
This works fine in all browsers I've tried (IE v10, Chrome v23, Opera v12, and Firefox v17). However, when I view the same pages in Kindle Fire HD, both audio files (ogg and mp3) play -- one after the other (which is driving me mad). This is not supposed to happen. Anyone have any answers and/or suggestions? Thanks! Happy Holidays....
This sounds like a bug in the Kindle Fire browser. If the first source file can be played, the second one should be ignored.
It might be worth changing the order of the source elements (i.e. put MP3 first). I doubt it will make a difference but just in case - could be some strange browser quirk.
Another possibility is a bug with the browser's autoplay implementation. Have you tried removing the autoplay attribute? If that's the problem then you could try using JavaScript's play() method on page load instead.
A more reliable solution is to use JavaScript to detect for codec support. Something like this should work:
HTML:
<audio id="myAudio">
Your browser does not support the audio element.
</audio>
JavaScript:
function getAudioType(element) {
if (element.canPlayType) {
// CanPlayType returns maybe, probably, or an empty string.
if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return('ogg');
} else if (element.canPlayType('audio/mpeg;') !== '') {
return('mp3');
}
}
return false;
}
var audio = document.getElementById('myAudio');
var audiotype = getAudioType(audio);
if (!audiotype) {
// Some fallback or not-supported message here
} else {
audio.src = '../../audio/andromeda_oars.' + audiotype;
audio.play();
}
UPDATE:
Example of this in action
I have tried the following HTML in the FireHD7 and it works fine - only one of the audio tags plays.
If you are still having a problem what version Silk browser are you using and is it on the HD7 or HD8.9 device?
<html lang="">
<head>
<meta http-equiv="content-type" content="text/html; charset=">
<title>Audio Test</title>
</head>
<body>
<audio id=audio0 controls autoplay="true">
<source src='http://www.russianlessons.net/audio/lesson3-20.mp3' type='audio/mpeg'>
<source src='http://www.russianlessons.net/audio/lesson3-20.ogg' type='audio/ogg'>
</audio>
</body>
</html>
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>
Can anyone give a concise instruction on how I can have a flv play from my html page please?
With video.js its very easy. All you need to do is include js & css in head & then use html5 code as:
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480"
data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
<source src="video1.flv" type="video/x-flv">
</video>
</body>
For further details: http://videojs.com/
Actually, I did not find information specified about playing flv files. But it works fine. :)
You can use other video formats using video.js all you need to change is type as...
<source src="..." type="video/mp4">
Moreover, there might some issue regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
Wrap a flash player around it, such as Flowplayer. There currently is no other way; browsers can't just render an FLV by itself.
See the installation guide for Flowplayer, taking you step-by-step on how to place the video directly into your HTML.
I'm fairly certain that shadowbox can also play FLV files: http://www.shadowbox-js.com/
It's clean, minimal and fairly simple to setup.
You can try https://github.com/Bilibili/flv.js
With flv.js, You'll get:
Pure HTML5 + JavaScript Video Player for flv videos
Pure HTML5 + JavaScript LiveStream Player for http-flv streams
Flawless experience
Smaller size than H.264 Videos
Flv.js utilizes MSE (Media Source Extensions) therefore it'll only be available on Chrome 43+, Firefox but not Apple / iOS Safari.
Flv.js instantaneously transmuxes flv streams to H.264 streams and then push the H.264 stream to Media Source Extensions. It'll display as a video tag in HTML Element with a blob URL.
Another really popular Flash player is the JW Player, at http://www.longtailvideo.com/ . They have a nice setup wizard that generates the code you need.
Insert an SWF object into your HTML and assign the FLV in the attributes as the video that will play.