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/
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>
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>
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!
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 an embed code that plays streaming video:
<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="MY STREAM URL">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="MY STREAM URL" href="MY STREAM URL" kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed></object>
The embed works as expected in Chrome. However in FireFox(3.6) and IE(9) I get a quicktime logo. I've checked my quicktime player prefs and I don't see a streaming or sdp option in the mime options.
Any ideas why I'm seeing this issue?
Your embed tag is set up to initially display a "poster" video (at /poster.mov, and then change to the stream when its clicked on. The object tag isn't (and also skips many of the parameters you're including in the embed). The general idea with these embed inside object schemes (particularly with QuickTime) is to pass the same parameters in both tags, the object covering IE, the embed covering basically everybody else. – John Flatness