I am trying to use a video element for HTML5 video and a nested element for Flash fallback. I have seen code using flowplayer to fallback to flash - but their documentation only shows a javascript interface. Is there any way to do something like what is below? To test, I remove the two lines with "source src="... "
If I have to use javascript for the flash, how would I code it in line with HTML5?
Thanks!
<video id="movie" width="640" height="360" preload controls>
<source src="./videos/fiddler-tradition.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="./videos/fiddler-tradition.mp4" />
<object id="flowplayer" width="640" height="360"
data="./flowplayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="./flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"./videos/fiddler-tradition.flv"}' />
</object>
</video>
The above non java flowplayer code (the code within the object tag) works fine when outside the video tags. I realize my issue is testing the fallback without html5 on my localhost machine while all I have available is an html5 browser. I will upload to the web and try on another pc with an older browser.
UPDATE: All is working - Testing in IE7, the code falls back to flash player. Yeah!
Related
I was asked to embed a wmv file into a piece of html.
So far so good, googling on how to do it quickly reveals that this is achieved using html tags object and embed.
My problem is that the sample I set up (shown below) is only working in IE. Chrome displays a a gray box with the message "This plugin is not supported", and following the help that shows up turns out chrome does not play NPAPI plug-ins anymore. Firefox shows nothing whatsoever, not even the object frame.
I researched a bit for workarounds to play it on chrome notwithstanding the fact google stopped supporting it sometime on 2015.
Messing with chrome://flags/#enable-npapi looked promising (as suggested here), but I can't find a enable Npapi among my flags.
Anyone knows how to have it working at least in Chrome, Firefox and IE ?
Is it possible to (freely) convert a wvm to Html5 video ?
<Html>
<Head></Head>
<Body>
<object id="MediaPlayer" width="192" height="190" type="video/x-ms-asf">
<param name="FileName"value="D:/myVideo.wmv">
<param name="autostart" value="false">
<param name="ShowControls" value="true">
<param name="ShowStatusBar" value="false">
<param name="ShowDisplay" value="false">
<embed type="application/x-mplayer2" src="D:/myVideo.wmv"
width="192" height="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0" />
</object>
</Body>
</Html>
There are any number of resources that will convert your wmv to mp4/ogg/other types of cross-browser format, including http://video.online-convert.com/convert-to-mp4, however thats beside the point.
If you want to display the video in html5, you should really use the <video>
tag.
An example of this would be
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
I am using mediaelement.js to place a video onto the web page. For those unfamiliar with it, it is a video player element that takes in a single source video and displays in various formats (HTML5 or flash) based upon browser capabilities
The mp4 that I am using has the captions embedded into itself. Is there a way with HTML5 or mediaelement.js to display these captions. I know that I can pull an external track:
<track kind="subtitles" src="subtitles.srt" srclang="en" />
but since it is embedded I would prefer to use those. This is what my code looks like:
<video width="640" height="360" style="width:100%; height: 100%;" src="myvid.mp4" type="video/mp4" id="video1" controls="controls">
<source src="myvid.mp4" type="video/mp4" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=myvid.mp4 />
<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
No video playback capabilities
</object>
</video>
I have integrated the medialement player. It works great on all browsers except firefox. As I am trying to integrate a mp4 video. I know that firefox does not support mp4, and hence setup a flash fallback. The flash fallback works, but it gets called twice. And I have 2 instances of the player getting played simultaneously. Any idea why would this happen?
The code:
<video id="player1" width="700" height="430">
<source type="video/mp4" src="'+videoUrl+'" />
<object width="700" height="430" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="/assets/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file="'+videoUrl+'" />
</object>
</video>
The videoUrl is submitted by the user. The user is given a prompt to paste the URL.
Why does Chrome keep attempting to mount mp4 files when it can't play them?
I am working on a PC Windows 7, IE 10, Chrome Version 25.0.1364.172.
It doesn't matter whether mp4 source line is before or after the object lines, Chrome seems to want to mount the mp4 files even if it can't play them.
I would like to play the mp4 file in IE 10 and the flash equivalent in Chrome, but I can't seem to make any combination of line ordering work.
So far, my only workaround is to use flash in both browsers. But why do I have to? I thought the html5 video tag was supported by both browsers?
Is this the correct way for a flash fallback to be coded, as it doesn't seem to be working. Is there a way to code this so I don't have to use flash in IE 10, which can play the mp4 files native?
Thanks for whatever assistance you can give me.
Here's a copy of the code generated at http://sandbox.thewikies.com/vfe-generator/
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="Mark.jpg" width="640" height="480">
<source src="Mark.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="640" height="360">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&image=Mark.jpg&file=Mark.mp4" />
<img alt="Mark" src="Mark.jpg" width="640" height="480" title="No video playback capabilities, please download the video below" />
</object>
</video>
My videos are in amazon and i want to play this video by flowplayer or jwplayer.But my requirement is the video first try to play in html5 if it not possible it will go for flash mode.
I need a combination of HTML5 embed code and Flash embeded code.The embed code will automatically detect if the requesting device can play HTML5. If so, it will serve that code. If not, it will serve Flash version
I know it's been sometime since this question was asked, but in case anyone else is looking for the answer you can try
<video width="VIDEO-WIDTH" height="VIDEO-HEIGHT" controls preload="auto">
<source src="VIDEO-PATH.m4v" type="video/mp4">
<source src="VIDEO-PATH.ogv" type="video/ogg">
<object class="aligncenter" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="560" height="315">
<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':'VIDEO-PATH.m4v','autoPlay':false, 'autoBuffering':true }}">
<p>Your browswer does not support video...</p>
</object>
</video>
Replace “VIDEO-WIDTH” and “VIDEO-HEIGHT” with the video dimensions, and replace “VIDEO-PATH” with the full URL of the video, and you’re good to go.
One important note: mp4/m4v video files will not play in Firefox. And if you use the HTML5 video tag, Firefox also won’t fallback to Flash, either. It will just show a blank box. You need to include an ogv file format in addition to mp4.