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
Related
First of all here is the website I'm currently coding :
http://www.clairereviens.com/
On each button, there is one tag for one mp3 sample. All the mp3 are playing perfectly with Safari, but with Chrome only a few buttons are working.
I tested with type audio/mp3 and audio/mpeg, but it doesn't change.
Thanks guys
Its too late but this might help anyone in future.Both audio of mp3 quality(128 and 320 Kbps) and video of mp4(in iFrame) are working fine in the google chrome version 55.0.2883.87.
<audio controls="controls" src="mydriveaddress\test.mp3" autoplay>
</audio>
<iframe src="mydriveaddress\test2.mp4" height="300" width="300" allowfullscreen=""></iframe>
Some of the buttons are not working because you are specifying the file type wrong. All the audio files are mp3 but you're specifying some of them as mpeg.
You need to change this:
<source src="sons/xxx.mp3" type="audio/mpeg">
to this:
<source src="sons/xxx.mp3" type="audio/mp3">
For all of them.
I had the same problem with Google Chrome. It's more of like a version problem of chrome. To fix that re-encode the MP3 files to a lower bitrate using Audacity or other Media Converters.
For more info: https://stackoverflow.com/a/32719143/8009667
my code:
<video width="600" height="400" controls="controls">
<source src="uploads/video/patientenhandset_uk_high.mp4" type="video/mp4" />
<source src="uploads/video/patientenhandset_uk_high.ogg" type="video/ogg" />
Your browser not supported this video.
</video>
This code IE10, IE9, firefox and opera works. So why does not work in chrome?
I believe Chrome uses the WebM format (video/webm), so you'll probably need to offer this as another <source> alternative.
That code looks fine. Are you serving the right mime type for mp4?
The latest chrome plays HTML5 video fine, so you have something wrong, but it doesn't appear to be in your HTML. You may also want to try switching your source tags to using a fully qualified domain name, like http://www.yourdomain.com/yourvideo.mp4
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'>
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.
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.