Image placeholder fallback for HTML5 Video - html

I'm using the following code to implement an HTML5 video on a page
<video autoplay>
<source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
This works great, embedded on my page in FF, Safari, and Chrome. What I'd like, since this video has no controls, and is mean to be embedded in the page with no borders (white BG in the video) is to have an image appear in place of the video.
I'd like to have an image as the fallback if the video can't be rendered with the element. I've seen the following post: html5 video fallback advice (no flash) which started the discussion. But not sure if those answers were what I needed.
My gut tells me that I can have JQuery detect the video capability, and if video is not supported, then write out some HTML that shows an image. But I was looking to see if there's something that could be simpler.

After a lot of searching, I found the solution that worked for me back to IE8. Have not tested in IE7.
How can I display an image if browser does not support HTML5's <video> tag
The above post, shows a method that seems to work for me. Here is the output based on my above code:
<video autoplay>
<source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
<img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
</video>

The IE7 browser does not supports Video Element. We have to write Fall back code for video tag. Here is my code :)
<video controls="controls" autoplay="autoplay"
poster="#" width="212" height="160">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
width="212" height="160">
<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={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>

Related

How to disable autoplay of the movie in XHTML transitional

Here's my code
<object type="application/x-shockwave-flash" style="width:425px; height:349px;" data="multimedia/1.mp4">
<param name="movie" value="multimedia/1.mp4" />
<param name="autoplay" value="false" />
<param name="allowFullScreen" value="true" />
</object>
When i open my website, the movies are automatically playing.
What is the solution so i can disable the autoplay of my movies in my website that use XHTML transitional?
I'd remove the autoplay attribute, since if the browser finds the autoplay string, it autoplays!
The autoplay is not a boolean type.
Also, the type goes inside the source, like this:
<video width="640" height="480" controls preload="none">
<source src="http://example.com/mytestfile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
or
Try adding autostart="false" to your source tag.
<video width="640" height="480" controls="controls" type="video/mp4" preload="none">
<source src="http://example.com/mytestfile.mp4" autostart="false">
Your browser does not support the video tag.
</video>
JSFiddle example

HTML 5 Video IE9 not loading properly

I've got this page with 5 separate bio sections. Each one shows text and a video and hides the others. Works in Firefox and Chrome, but not IE9. One video loads in IE9. Whichever one you click on first. The poster disappears right away but the video will play. Clicking on any other name, the video does not pop up.
Link and code to follow. I used the fairly standard method of including video and providing fallback. Anyone have any thoughts?
http://www.friedmanllp.com/experienced_hires_people2.php
<video id="video1" controls="controls" poster="flash/poster_ayanna.jpg" preload="none" width="398" height="224">
<source src="flash/video_ayanna.webm" type="video/webm" />
<source src="flash/video_ayanna.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2" />
<source src="flash/video_ayanna.ogv" type="video/ogg" />
<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={'playlist':['flash%2Fvideo_ayanna.jpg',{'url':'flash%2Fvideo_ayanna.mp4','autoPlay':false}]}" />
<img alt="Ayanna" src="flash/poster_ayanna.jpg" width="398" height="224" title="No video playback capabilities. Please try a different browser." />
</object>
</video>
IE was throwing it's hands up at the brute force pause all videos.
$("#video1")[0].pause();
$("#video2")[0].pause();
$("#video3")[0].pause();
$("#video4")[0].pause();
$("#video5")[0].pause();
So I made a check to see if any video elements were playing and paused them accordingly.

When video works in IE9, it doesn't anywhere else

I can't seem to get my video to play in all browsers.
The code below works everywhere, but in IE9 it displays a black box where the video should be, then below it it plays the IE video.
If I make the video tag conditional to all except IE, it doesn't work in Chrome or FF but IE is fine.
Help??
<video controls="controls" width="315" height="186" >
<source src="/video/Ryan2.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="/video/Ryan2.ogv" type="video/ogg" />
</video>
<!--[if lte IE 9]>
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="315" height="186">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashVars" value="controlbar=over&file=/video/Ryan2.mp4" />
<param name="wmode" value="transparent" />
</object>
<![endif]-->
The longtail video player is being displayed in IE 9 because your conditional comment states "if less than or equal to IE 9". You should use [if lt IE 9] to target IE 8 and below. But with that said, a better solution would be to embed the longtail player in the video element itsef. It will be displayed automatically on legacy browsers that don't support the <video> element. Like this:
<video controls="controls" width="315" height="186" >
<source src="/video/Ryan2.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="/video/Ryan2.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="315" height="186">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashVars" value="controlbar=over&file=/video/Ryan2.mp4" />
<param name="wmode" value="transparent" />
</object>
</video>
I'm not sure why the mp4 won't play in IE 9. Does it play when you drag and drop the video file directly into the IE9 browser window? Are your server MIME types set up correctly?

Unable to play video Microsoft media player for html pages

i am trying to play videos on my site. its working on production. After publishing site on domain player isn't playing videos. Instead its showing msgs on media player bar like
'Preparing to connect', 'Connecting...' and 'Ready', which shows dark screen.
Here is my code of videos.
<SPAN id="music1">
<OBJECT style="width:560px; height:300px" id=mediaPlayer
codeBase=http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=5,1,52,701 type=application/x-oleobject
standby="Loading Microsoft Windows Media Player components..."
style="margin-left: 0px" classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95>
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows
/mediaplayer/en/download/" bgcolor="darkblue" showcontrols="true"
showpositioncontrols="true" showstatusbar="tue" showgotobar="true"
src="videos/1.wmv" autostart="true" designtimesp="5311"
loop="true" height="600" width="470">
</OBJECT></SPAN>
Please let me know, where i am doing wrong, or its domains issue??
Thanks in advance
Try this simple one:
<embed src="videos/1.wmv" width="600" height="470" type="video/x-ms-wmv"></embed>
Your object doesn't seem to have the source of the video specified. The embed has, but not the object
<SPAN id="music1">
<OBJECT style="width:560px; height:300px; margin-left: 0px" id="mediaPlayer"
codeBase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject"
standby="Loading Microsoft Windows Media Player components..."
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<PARAM NAME="URL" VALUE="videos/1.wmv">
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows
/mediaplayer/en/download/" bgcolor="darkblue" showcontrols="true"
showpositioncontrols="true" showstatusbar="tue" showgotobar="true"
src="videos/1.wmv" autostart="true" designtimesp="5311"
loop="true" height="600" width="470" />
</OBJECT>
</SPAN>
You could also try to let go the object alltogether and just rely on the embed.
Try using
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
you can try this one:
classid=CLSID:clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6

Load Content If IE or Not IE

While designing my site i am attempting to use the HTML5 video tag. The video works using HTML5 in most browsers, and if it doesn't then it uses the flash fallback that i have included in the code. The main code is as follows:
<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<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={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>
Now the only browser that this still does not work on is IE9. IE9 sees the HTML5 video command and loads the player for a split second but never loads the video. So what i tried to do was to set it up as follows:
<!--[if IE]>
<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={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
<![endif]-->
<![if !IE]>
<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<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={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>
<![endif]>
However with this code loaded all the other browsers work again with the exception of IE9. It is not picking up the if IE tag and it is just going straight to the HTML 5 page which doesn't load.
Really what i am trying to do is say if it is ANY version of IE to use the flash based player and if it is anything else use the HTML5 with the flash fallback. If anyone could give some inside on how to make this work or a more elegant solution it would be really appreciated.
Thank you
Try Something like:
<!--[if lt IE 10]>
// here
<![endif]-->
You should use something like modernizr to check for your browsers features (instead of browser sniffing and making assumptions - they might be wrong or change). Depending on the client's capabilities you can then start serving the right content.
Another approach (if it's plain video only and you don't need any other feature detections) would be using something like shown at Video for Everybody.
This is the code they are proposing to embed 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 iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" 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="controlbar=over&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>