<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="300" height="170" poster="../images/audi/audi_poster.png"
data-setup="{}">
<source src="../videos/audi/audi.mp4" type='video/mp4'>
<source src="../videos/audi/audi.ogg" type='video/ogg'>
<source src="../videos/audi/audi.webm" type='video/webm'>
</video>
</body>
</html>
For the above code, the file plays without any error on Google Chrome but not on Firefox and IE.
I have no idea where I am wrong.. PLease help.. I really need to solve this issue.
pls help
The website runs on goddady server. I am not using any database to store the video file nor any php programming.. I simply upload the video to the server n the the html file...
Its a very simple page I want to have with the video playing for all 3 browsers..
The HTML5 video and audio tag support is not the friendliest at the moment.
Firstly you DOCTYPE should be <!DOCTYPE html> as mentioned in the comment. Then there are a couple of things to consider:
Firefox doesn't support MP4 playback, neither does Opera. You will need to convert the video from MP4 to WEBM or OGG format and put them in the same directory as the MP4 to suit your example.
IE8 and below don't support the <video> tag at all and I'm guessing that's the problem with your IE version. IE9 does support MP4 playback however.
After having a good play with this for a project I am currently working on here are some of the issues I also came across:
iOS devices (and mobile devices in general) don't really like the tag (especially inline), after playing with it for a while I ended up just straight linking to the MP4 video and it now opens up in the default player.
Google Chrome or IE9 don't support a fullscreen button yet, but Safari does. Haven't checked FF or Opera, see below.
To avoid the need for users to upload 3 different files. I've added a flash fallback (Flowplayer) for FF and Opera (and any browser that doesn't support MP4 <video> playback). I may create the WEBM or OGG files on the server, but this also helps with older browser like IE8. Here is a JavaScript snippet on how to check support for MP4 playback:
var flashaudioplayer=false;
var flashvideoplayer=false;
// Check if browser supports HTML5 native mp3/mp4 playback
var audioTag = document.createElement('audio');
var videoTag = document.createElement('video');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
flashaudioplayer=true;
}
if (!(!!(videoTag.canPlayType) && ("no" != videoTag.canPlayType("video/mp4")) && ("" != videoTag.canPlayType("video/mp4")))) {
flashvideoplayer=true;
}
You will also find the same issues with MP3 playback support in the <audio> tags, Flowplayer also has a way to play MP3 files so it's a nice option for a flash fallback.
Related
So what I'm trying to do is to play a HLS m3u8 file from an Backblaze B2 bucket that I have (via B2's S3 API) . The problem that I have is an HLS file is made up of both the .m3u8 file which keeps track of all the .ts files which are the parts that the .m3u8 file needs to play. So the problem I have is when putting the .m3u8 file into an HTML video tag nothing happens even in a browser where HLS files are compatible i.e Google Chrome.
I have checked other similar questions, but none of them seem to work, because the ts files are always missing.
I know the problem is the .ts files are missing but I have no clue how to reference them as well from my web server. Is there any way I can somehow play a HLS file and all its parts from a HTML video tag?
My current code is like so:
<video width="1920" height="1080" controls>
<source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
Your browser does not support the video tag.
</video>
Different browser have different support for video files and streaming formats.
Currently Desktop Safari and Edge latest version support 'native' HLS support but Desktop Chrome does not. You can see uptodate support info in a number places such as:
https://html5test.com/compare/feature/streaming.type.hls.html
By 'native' in this context, it means the browser can recognise the streaming format or file type when it is included as the 'source' attribute within the HTML5 tag and play it without any further code or plugins etc.
To allow you play your file back on Chrome at this time the usual approach is to use a Javascript Video player which will use the browsers support for Media Source Extensions (MSE) to interpret and prepare the HLS steam for playback. Some common open source examples include:
Video.js (https://github.com/videojs/video.js)
Shakaplayer (https://github.com/google/shaka-player/)
There are plugins available also for Chrome to play HLS if you do not want to use one of the above players for some reason for your solution, but these require the user to have installed the plugin, whereas the above players should work on any up to date browser release for the major Desktop browsers.
Okay so I've found a solution to my problem using video.js + video.js http streaming.
I needed to set my CORS rules on my Backblaze B2 Bucket, it's a setting on the screen with all your buckets to "Share everything in this bucket with all origins."
Next I just used this code segment using both video.js and the plugin for it for hls streaming for all major browsers with it which is video streaming https. Both of them just require a simple script tag from their respective cdns.
The documentation you need is found here: https://videojs.com/getting-started/ and here: https://github.com/videojs/http-streaming and you need both as they perform different functions.
So the code that I found finally works in my case is:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Video</title>
<link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
<!-- For IE8 (for Video.js versions prior to v7)
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
-->
</head>
<body>
<h1>My Video</h1>
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
</video-js>
<!--This is for Video.js by itself -->
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<!--This is for HLS compatibility with all major browsers-->
<script src = "https://unpkg.com/browse/#videojs/http-streaming#1.13.3/dist/videojs-http-streaming.min.js"></script>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
I actually have a probleme playing some MP4 video on my phone.
I'm on android 5.0.1, using Chrome 47 with this simple html code :
<!doctype html>
<html>
<head>
<title>ssqsq</title>
</head>
<body>
<video controls="" autoplay="" name="media">
<source src=x type="video/mp4">
</video>
</body>
</html>
Let say 'x' is a variable where is my source address.
When the address is : http://www.w3schools.com/html/mov_bbb.mp4 , Chrome read the video without probleme.
But when x is : http://someurl/files/atoms/video/mov_bbb.mp4
(it's the same video, literaly. I download from w3s to upload on this website), my chrome isn't abble to read the video
'someurl' has an .htaccess, but this not seem to be the probleme since the video play normally on chrome(on my desktop) and even on my androind (using FireFox 43.0)
I have thinking of codec probleme when i was working with other video, but this one (mov_bbb.mp4) does not change between w3s and 'someurl'
I don't know where it could come from.
Not the codec, because video play well on w3s.
Not the server configuration because the video play well on firefox and on desktop...
Advice and help would be thankfull!
I'm having an issue with ie9 and mp4 videos. If I open the page in Safari the mp4 videos work fine but they won't load in ie9. I'm out of ideas as to what it might be.
On my local windows machine the html5 videos play fine, once the pages go to the live server they no longer work. Opera and Firefox are working fine with the OGG format. Safari plays the .mp4 format but IE will not. Internet explorer is the only browser that is acting odd.
I thought it was a Mime Type issue except that Safari works with the server side .mp4 file.
Iv looked into it being a Doctype issue, except the doctype on the live site is the same as it is on my local. I'm running out of ideas as to what could be causing this.
<video webkitSupportsFullscreen='false' width="960" height="640">
<source id="mp4" src="/videos/video.mp4" type='video/mp4' />
<source src="/video/video.ogg" type="video/ogg" />
<source src="/video/video.webm" type="video/webm" />
<img src="/images/screenshot.jpg">
</video>
HTML5 Please recommand using a polyfill for this.
So you can use this one : http://mediaelementjs.com/
Note: Are you sure your DOCTYPE respect the HTML5 syntax as following :
<!DOCTYPE html>
Do you have a <!doctype html> defination? If it's not, IE9 will run in quirks mode that has no html5 support.
Make sure to add the meta tag for the X-UA-Compatibility for IE ANYTHING!
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
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 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