I have an audio element in a webpage for a client and i have coded it as well as i can but i still can't get it to work on All browsers. I know cross browser and browser editions (i.e. internet explorer 6,7,8,9 ) with audio is tricky but there has to be an answer here. Can this be done and without needing browser plugins? Here is my current code.
<audio preload="auto" autobuffer autoplay="autoplay">
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.mp3"/>
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.ogg" />
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wav" />
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.au" />
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wma" />
<!-- browser compatibility fallbacks -->
<object>
<param name="autostart" value="true">
<param name="src" value="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wav">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wav" controller="false" HIDDEN="TRUE" autoplay="true" autostart="True" type="audio/wav" />
<embed src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.mp3" controller="false" HIDDEN="TRUE" autoplay="true" autostart="True" type="audio/mpeg" />
</object>
<!-- End browser compatibility fallbacks -->
</audio>
I would look here for some answers. I personally have made a page that uses the native <audio> element but provides a WMP fall back for the less tech savvy users that insist on using old deprecated software.
Related
I am using HTML5 to embed a video on my site. It works in all browsers except Edge.
Here is my code:
<video id="sampleMovie" width="509" height="280" preload autoplay>
<source src="breaking_news.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="breaking_news.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="breaking_news.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value='config={"clip":{"url":"breaking_news.flv","autoPlay":false,"autoBuffering":true}}' />
</object>
</video>
I removed the full URL for the purpose of posting here.
Any idea on why it will not play in Edge?
Based on the Edge browser video developer guide for mp4, this is what is supported:
Media File : Video MP4.
Extension setting : .mp4.
Mime type setting : video/mp4.
Based on the code you provided, the MP4 file you are providing has an extension type/container type of .mov which is not supported.
Thus, I recommend re-encoding your source video file so that it has the .mp4 extension type, more than likely this is the issue. I would also look at the specific codec type you are specifying.
Lastly, I recommend looking at their full dev guide found here: https://learn.microsoft.com/en-us/microsoft-edge/dev-guide/html5/video
Hope this helps.
If I set my video tag up to be something like
<video src="myvid.mp4"></video>
IE9 plays the video in its entirety, if however I have it as
<video>
<source src="myvid.webm" type="video/webm" />
<source src="myvid.ogv" type="video/ogg" />
<source src="myvid.mp4" type="video/mp4" />
</video>
The video plays for about 3 seconds and then stops.
Unfortunately if I use the first method then browsers like Firefox don't look at the <source> attributes and refuse to play.
Lots of research has ruled out MIME types and video encoding as potential issues.
The full code for what I currently have is:
<video controls="controls" poster="<?=$template_path;?>/images/home-video.png">
<source src="<?=$template_path;?>/videos/intro_blue.webm" type="video/webm" />
<source src="<?=$template_path;?>/videos/intro_blue.ogv" type="video/ogg" />
<source src="<?=$template_path;?>/videos/intro_blue.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="600" height="600">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashVars" value="controlbar=over&image=<?=$template_path; ?>/images/home-video.png&file=<?=$template_path; ?>/videos/intro_blue.mp4" />
<param name="wmode" value="transparent" />
<img alt="Intro" src="<?=$template_path; ?>/images/home-video.png" width="600" height="600" title="No video playback capabilities, please download the video below">
</object>
</video>
I think the issue may be in server settings. You don't need the MIME type for video content. And IE is strict with it. See here for example.
In my case it seemed to be IE9 behind certain firewalls was not allowing the video to download completely (other browsers allowed it).
I wasn't happy with this so as a precaution I forced IE9 to use flash.
I am having some trouble trying to figure out what is causing HTML5 video to be extremely slow loading/playing in Safari. I have tested the same below code on Chrome, Firefox, IE (irrelevant as it uses the flash) and the load/play times are nearly instant. But on Safari, I need to wait pretty much a whole minute before it starts playing. I had tried removing the video's 'autobuffer' parameter, but made no difference. Any ideas?
<video id="video-window" autoplay="autoplay" autobuffer="autobuffer">
<source src="testvideo.mp4" type='video/mp4' />
<source src="testvideo.webm" type='video/webm' />
<source src="testvideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="player.swf" width="640" height="480">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="autoplay" value="true">
<param name="flashvars" value="testvideo.mp4">
<!--[if IE]><param name="movie" value="player.swf"><![endif]-->
<p>Your browser can’t play HTML5 video.</p>
</object>
</video>
You need to use Handbrake and check the Web optimized option when encoding. I have no clue why but this reduces Safari lag dramatically. Still not as speedy as other browsers but much better.
I'm trying to get my site using html5 instead of those ancient horrible horrible embed/object stuff. I exported the html to a test page.
It doesn't work for me in Firefox or Chrome (on a Mac). Here are the goodies on this page:
<video width="500" height="350" controls="controls">
<source src="/temp/output.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" standby="video loading" scale="aspect" HEIGHT="350" WIDTH="500" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM NAME="src" VALUE="/content/preview/350/aerial-tour-of-thebes-ramusseum.mov" >
<PARAM NAME="autoplay" VALUE="true" >
<param name="controller" value="true"><param name="loop" value="true">
<param name="scale" value="aspect"/>
<EMBED scale="aspect" HEIGHT="350" WIDTH="500" TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/" SRC="/content/preview/350/aerial-tour-of-thebes-ramusseum.mov" controller="true" loop="true" AUTOPLAY="true"/>
</OBJECT>
</video>
Two questions :
what's wrong with this code? I know mp4 is a valid format for html5, right? What's the deal? and
Isn't the point of all of this to degrade nicely in browsers that don't have support? I just see a gray box with an x in it. Shouldn't it execute the object/embed stuff and show the video the way it used to?
Some browsers doesn't support MPEG4 for licensing reasons. This format is patented, so developers of these browsers would have to buy patent license for every user of their browser.
Firefox currently supports Ogg Theora and WebM.
Here you have format support matrix across various browsers/operating systems:
http://en.wikipedia.org/wiki/HTML5_video#Table
I have a blog section on my site that has the TinyMce editor. I want to embed a video when I post a blog and it's just spitting out the code. I have added the <embed> tag on my output script.
This is the code I'm using to for the video:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/CgW_5Vthsds"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>
What am I missing?
You should look into Video For Everyone:
Video for Everybody is very simply a chunk of HTML code that embeds a video into a website
using the HTML5 element which offers native playback in Firefox
3.5 and Safari 3 & 4 and an increasing number of other browsers.
The video is played by the browser itself. It loads quickly and doesn’t threaten to crash your browser.
In other browsers that do not support , it falls
back to QuickTime.
If QuickTime is not installed, Adobe Flash is used. You can host locally or embed any Flash file, such as a YouTube video.
The only downside, is that you have to have 2/3 versions of the same video stored, but you can serve to every existing device/browser that supports video (i.e.: the iPhone).
<video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
<source src="__VIDEO__.mp4" type="video/mp4" />
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]-->
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4" />
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
MPEG4 / H.264 “.mp4” (Windows / Mac) |
Ogg Theora & Vorbis “.ogv” (Linux)
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
There is an updated version that is a bit more readable:
<!-- "Video For Everybody" v0.4.1 by Kroc Camen of Camen Design <camendesign.com/code/video_for_everybody>
=================================================================================================================== -->
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls preload="none">
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
<source src="__VIDEO__.webm" type="video/webm" /><!-- Chrome / Newest versions of Firefox and Opera -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: "MP4"
Open Format: "OGG"
</p>
If you have an mp4 video residing at your server, and you want the visitors to stream that over your HTML page.
<video width="480" height="320" controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>
Most likely the TinyMce editor is adding its own formatting to the post. You'll need to see how you can escape TinyMce's editing abilities. The code works fine for me. Is it a wordpress blog?