I have an MP3 audio stream contained in an .m3u8 file delivered through CloudFront. This is successfully used by apps to play audio, but I'm trying to play this in a browser.
I have tried the basic HTML <audio> tag, and more sophisticated implementations like videojs. In all cases, the audio plays fine in Safari, but will not play in Chrome or Firefox.
Using video.js:
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"liveui": true}'>
<source src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8" type="application/x-mpegURL"/>
</video>
<script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
</body>
HTML:
<audio
controls src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8">
Your browser does not support the
<code>audio</code> element.
</audio>
Does anyone have any theories as to what it is about Chrome and Firefox which means it does not play there?
Video.js does not support mp3 in HLS. HLS with acc would work.
Related
If you look at my web page you'll see that the top video (medieval guy with red nose) plays perfectly, both video and audio.
But if you look at the bottom (2nd) video, when you play it, there is only audio. The "video image" you see is actually not the video itself, but a png utilizing the "poster" html tag.
Here is the html for both videos:
<video src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v" poster="http://shapeshed.com/examples/HTML5-video-element/images/posters/les.jpg" controls="true" width="320" height="240">
Your browser doesn't support the video tag. You can download the video here.
</video>
<video src="videos/Play.mov" poster="videos/Play.png" controls="true" width="800" height="600">
Your browser doesn't support the video tag. You can download the video here.
</video>
The 2nd video is the one I care about, but I cannot get the video to work in Chrome -- it only plays the audio. But on Mac Safari the video works fine. Am I doing something wrong? It seems I'm implementing my 2nd video exactly the the 1st video. Why does 1 work and 2 doesn't?
EDIT: I got further along, but now in iPad only (Chrome works, iphone works) I get video but no audio. Any ideas?
EDIT #2: I need my 2 videos to play correctly on Apple Safari -- nothing else matters, because all users besides Apple devices will be seeing Youtube-embedded videos. Can anyone tell me exact steps to convert AVI to a video format guaranteed to work in Apple Safari?
Your video is encoded with MPEG-4 Part 2 video and AAC audio. MPEG-4 Part 2 video is not supported by Google Chrome. Unless you manually install additional codecs, the only video codec supported by both Safari and Chrome is H.264 (also known as MPEG-4 Part 10, or MPEG-4 AVC). If you re-encode as H.264 it should be placed in a MP4 container with AAC audio and a .mp4 file extension (not .mov).
Web video is complicated, most browsers support different video formats (codecs). To be compatible with all browsers you need every video in 3 different file formats: MP4, OGG, WEBM.
For maximum compatibility, here’s what your video workflow will look like:
Make one version that uses WebM (VP8 + Vorbis).
Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
Make another version that uses Theora video and Vorbis audio in an Ogg container.
Link to all three video files from a single element, and fall back to a Flash-based video player.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
Source: http://diveintohtml5.info/video.html#what-works
You might want to try something like this:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
More help here html5 video
Different video types support different browsers. You can convert your videos in HTML5 format using some software like DVDVideoSoft Free HTML5 Video Player And Converter or any other. In second video you are using mov video which only playing audio.
Hi.
I have a song, that I would like to have looped, but I cant really figure out what the problem is. Currently it's only playing a single time and then stops with no loop.
The code is as follows
<embed name="bosse" src="bosse.mp3" loop="true" autostart="true" style="visibility:hidden;"/>
Try the HTML5 Audio control:
<audio controls loop autoplay hidden>
<source src="bosse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
In the first tag, it specifies loop, autoplay, and hidden. The Your browser does not support the audio element. part is for if the audio controls is not supported by the browser, however, Firefox, Chrome, IE and Safari, as well as Opera all support this, according to W3Schools.
I am working on a script called HOME (view it here)
Now i'm creating a video player and used html5 for it but it wont load the video. Its just black. Here is my code.
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264">
<source src="/uploads/videos/1.mp4" type='video/mp4' />
</video>
Im using google chrome.
After doing some research it seems that google chrome and firefox doesnt support mp4 videos but support other formats. So i will have to change the script to upload and maybe convert the video to other formats. Source
I can't work out why my video is playing at different qualities on different browsers. In Chrome and FF the quality is terrible but in Safari and IE it looks fine. Does anyone know of a reason/solution?
Video:
www.mediaeclipse.co.uk
HTML Code:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="536" poster="http://www.mediaeclipse.co.uk/Media/previewimage1.png"
data-setup="{}">
<source type="video/ogg" src="http://www.mediaeclipse.co.uk/Media/Showreel.ogg">
<source type="video/mp4" src="http://www.mediaeclipse.co.uk/Media/showreelsmall.mp4">
</video>
You have two videos of incredibly different quality. The mp4 rendition looks fine, which is what Safari and IE are playing, but since Chrome and FF can play back OGG natively you're seeing the horrendous OGG encoding.
You can either remove the OGG rendition altogether and let Video.js fallback to the flash player, or transcode the mp4 as an OGG using something like Handbrake or Zencoder. I personally would suggest the latter, but either should do the trick.
I’m using this code in Google Chrome and the video is working well, but in Firefox (version 11) it’s not working.
How can I make it work in Firefox?
<!DOCTYPE html>
<html>
<body>
<video width="300" height="200" controls="controls">
<source src="http://localhost/javascript/test.mp4" type="video/mp4" />
</video>
</body>
</html>
Firefox doesn't support mp4 as encoding for the video. Have a look at MDN for a compatibility table.
You would have to provide additional encoding for Firefox to work (like this example taken from MDN as well):
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video.
<!-- You can embed a Flash player here, to play your mp4 video in older browseres -->
</video>
UPDATE 01/19/2016:
Now Firefox supports mp4 video formats. So this question should be automatically answered because of update by Firefox browser. Please let us know if your video still does not work.
Since version 4, Firefox only supports WebM, VP8 and Vorbis video format. (Firefox 3.5 supports Ogg, Theora and Vorbis.)
See:
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements.
http://diveintohtml5.info/video.html#what-works
You’ll need to create another version of your video in a Firefox supported format, and add another <source> element for it.
For an example, see:
http://diveintohtml5.info/video.html#example