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.
Related
I have some video sources as I stated below
Sample Video Source: https://r1---sn-5hne6nsr.c.2mdn.net/videoplayback/id/be1889e136a157dd/itag/37/source/doubleclick_dmm/ctier/L/acao/yes/ip/0.0.0.0/ipbits/0/expire/3747290803/sparams/acao,ctier,expire,id,ip,ipbits,itag,mh,mip,mm,mn,ms,mv,mvi,pl,source/signature/388EE84E16EB00C9F843F9A73533592875F7AC21.4849C933939EDFCC5C988E8F948B2DACD1A5505E/key/cms1/cms_redirect/yes/mh/NQ/mip/83.162.138.194/mm/42/mn/sn-5hne6nsr/ms/onc/mt/1609252593/mv/m/mvi/1/pl/14/file/file.mp4
When I copied and pasted in the browser it is working seamlessly but when I give it to an HTML Video tag like below, it does not work.
<!DOCTYPE html>
<html>
<body>
<video controls="" autoplay="" name="media">
<source src="https://r1---sn-5hne6nsr.c.2mdn.net/videoplayback/id/be1889e136a157dd/itag/37/source/doubleclick_dmm/ctier/L/acao/yes/ip/0.0.0.0/ipbits/0/expire/3747290803/sparams/acao,ctier,expire,id,ip,ipbits,itag,mh,mip,mm,mn,ms,mv,mvi,pl,source/signature/388EE84E16EB00C9F843F9A73533592875F7AC21.4849C933939EDFCC5C988E8F948B2DACD1A5505E/key/cms1/cms_redirect/yes/mh/NQ/mip/83.162.138.194/mm/42/mn/sn-5hne6nsr/ms/onc/mt/1609252593/mv/m/mvi/1/pl/14/file/file.mp4" type="video/mp4">
</video>
</body>
</html>
What am I missing? Any idea?
I figured out why your video tag was not playing, run your HTML with all your browser extensions off, The video tag is being blocked by my adblocker. After I turned it off it was working as regular.
The reason behind it because adblockers run in a privileged mode, their operation does not trigger events in the nonprivileged script space.
To work around it you have to Detect adblockers.
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.
I'm on a server still running ColdFusion version 8. I'm not sure if this is my problem though.
I have the following code that I can get to work in my computer on my desktop, using both Firefox and Chrome. I access it as an html file directly using a file system url, i.e. file:///C:/.../test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>
<body>
<p> Try w3Schools test video</p>
<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>
</body>
</html>
When I put this test.cfm or test.html page up on the Coldfusion 8 server, neither browser displays the video. The movie.mp4 and movie.ogv files are up on the server in the same directory as the test.cfm file. In Firefox I get:
"No video with supported format and MIME type found."
In Chrome it shows the video controls but no video is present.
Is there something I need to enable on the server (it is a shared hosting account)? Perhaps this is not particular to ColdFusion and I'm making another mistake (note this is my first attempt to use the video tags).
Thanks
P.S. If I access it on my computer using Aptana's launch mechanism and running in:
127.0.0.1:8000/.../test.html
I get the same problem as running on the server. The videos do not display.
Courtesy of Miguel-F's guidance, the server was missing support for the .mp4 and .ogv mime types. When the hosting company added those to the server, the videos displayed.
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>
I have the following html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html
{
height: 100%;
}
</style>
<script language=javascript src="scripts/lib.js"></script>
</head>
<body>
<audio controls autoplay>
<source src="track09.wav">
</audio>
</body>
</html>
It does work in FF4, but doesn't in Safari 5.0.5 under Winx64. How should I fix it?
Thx.
UPDATED. Both mp3 and html files are local, not stored on server side.
You need a different format than .wav - encode your audio in mp3 and ogg and include both formats in your markup like this:
<audio controls autoplay>
<source src="track09.ogg" type="audio/ogg" />
<source src="track09.mp3" type="audio/mpeg" />
</audio>
You can get a utility to do the encoding for you from http://audacity.sourceforge.net
This will cover all browsers that currently support html5 audio.
The answer is little edited.
Add type for source. I've tested in Safari. This code works for me.
<source src="track09.wav" type="audio/x-wav">
The other solution (for Safari) is to use AAC codec. It doesn't work in Firefox.
<source src="track09.aac" type="audio/aac" />
You may use Ogg Vorbis for Firefox. It probably doesn't work in Safari.
<source src="track09.ogg" type="audio/ogg" />
It looks there isn't any universal codec. You have to encode Your sound few times or don't support few browsers.
P.S.
It looks mp3 doesn't work anywhere for me.
For local testing it does not matter if the files are local, so are the html files.
the solution is not obvious at the first sight.
The Safari browser relies on Apple Quicktime to support the Audio tag.
If you download the Safari-Browser for testing purposes it will not work.
You need the complete package as Safari uses the Codec of Quicktime to support playback.
look here:
HTML5Tutorial
Furthermore the MP3 should be on the first place that safari can recognize it.
The best solution IMHO is to use multiple source files and mediaelement.js
Ekaterina,
Safari 5 does not play audio by itself. It needs QuickTime installed on Windows. Do that, and probably will work (If you still need it, since it was asked 2 years ago!)
https://discussions.apple.com/thread/2544849?start=0&tstart=0