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>
Related
Im building a site where video will be stream from mp4/m4v files on the server.
I am having trouble making this work in Chrome 47, evidently due to lack of NPAPI support.
Here are some variations of code I have tried and the results:
<video controls>
<param name="video" value="true" />
<source src="app/files/s1e1.m4v" type="video/mp4">
<source src="app/files/s1e1.m4v" type="video/ogg">
Your browser does not support the video tag.
</video>
Result: I get a javascript error frame with an message reading "This plugin is not supported"
<object width="100%" height="360">
<param name="movie" value="app/files/s1e1.m4v"/
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="100%" height="360" src="app/files/s1e1.m4v" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
Result: The player renders and seems to load the file evidenced by the correct video length being displayed in the player, but video does not play when I hit the play button.
Either method works perfectly in Safari.
Which method is best for cross-browser support?
I'm pretty sure this is a path issue but it's killing me, i cannot figure out the correct path to find the video. When I run this on my local machine it works just fine. When I run this server side in Chrome it works just fine. FF and IE however come back with "Cannot find this video".
Thanks!
<td width="225"><video controls poster="Approving.jpg" width="200" height="200" preload controls>
<source src="Approving.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="NonverBlaster.swf"
width="225" height="129">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=Approving.mp4">
<!--[if IE]><param name="movie" value="NonverBlaster.swf"><![endif]-->
<img src="Approving.jpg" width="854" height="480" alt="Video">
<p>Your browser can’t play HTML5 video. <a href="video.webm">
Download it</a> instead.</p>
</object>
</video></td>
This is the quintessential example of what happens when you walk away for a day and come back.
What was happening is I was browsing the HTML file through windows explorer instead of using IE/FF to go to IP/Port/index.HTML of the actual HTML.
Interestingly chrome know to look on the local server for the file.
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!
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.
What's the correct way of adding a .mov file to a webpage?
I'm just adding this functionality to an existing file so I can't convert it to HTML5. The file is on the same server about 1G in size.
The client also doesn't want to use YouTube or Vimeo as it's on the homepage.
Had issues using the code in the answer provided by #haynar above (wouldn't play on Chrome), and it seems that one of the more modern ways to ensure it plays is to use the video tag
Example:
<video controls="controls" width="800" height="600" name="Video Name">
<source src="http://www.myserver.com/myvideo.mov">
</video>
This worked like a champ for my .mov file (generated from Keynote) in both Safari and Chrome, and is listed as supported in most modern browsers (The video tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.)
Note: Will work in IE / etc.. if you use MP4 (Mov is not officially supported by those guys)
<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov">
<param name="qtsrc" value="rtsp://realmedia.uic.edu/itl/ecampb5/demo_broad.mov">
<param name="autoplay" value="true">
<param name="loop" value="false">
<param name="controller" value="true">
<embed src="sample.mov" qtsrc="rtsp://realmedia.uic.edu/itl/ecampb5/demo_broad.mov" width="320" height="256" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/"></embed>
</object>
source is the first search result of the Google
Well, if you don't want to do the work yourself (object elements aren't really all that hard), you could always use Mike Alsup's Media plugin: http://jquery.malsup.com/media/