I just exported a .mov file from Final Cut Pro.
I want to embed that video into my HTML.
I tried :
<object width="800" height="600"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="FRIEND.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="FRIEND.mov" width="160" height="144"
autoplay="true" controller="false"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
I got :
Then, I tried :
<video width="800" height="600" src="FRIEND.mov" controls ></video>
I got this :
Then, when I press the play btn, I got the sound to play, but not the video. ??? Curious ?
What is the most efficient way to achieve something like that ?
First of all you can check the video format which are supported by html5 video tag from here.
.mov format does not have support by any browser.
So you need to do this with object tag. At your object tag you are using quicktime player plugin which is not exists on your browser.
install quick time player plugin to your browser. if you using chrome check this
Related
I want to play live RTMP streaming video in my PHP application. I have tried the code below for that purpose:
<object width="400" height="409" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="rtmp://111.111.11.1/live">
<param name="allowscriptaccess" value="always"></param>
<embed src="rtmp://111.111.11.1/live" width="400" height="409"></embed>
</object>
But it is not working. When I replace rtmp://111.111.11.1/live with some 3gp files, then the code is working. What is the problem here? Is there any other code to play live streaming video?
Note: rtmp://111.111.11.1/live is a sample URL.
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!
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/
I have a image on my html page and i want it to play a sound effect when i click on it.
Here's the image code:
<img src="images/button1.png" width="32" height="32" onclick="alert();">
I want to change the alert box into the sound effect that i load in. How do i do it?
Well, it is not so easy, actually it is difficult to be accomplished ONLY with HTML. See here for more details.
You`ll face a various problems like:
Different browsers have different audio format support.
If a browser
does not support the file format, the audio will not play without a
plug-in.
If the plug-in is not installed on the users' computer, the
audio will not play.
If you convert the file to another formats, it
will still not play in all browsers.
Using A Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to an mp3 file. If a user clicks on the link, the browser will launch a helper application to play the file:
Play the sound
The best solution by my opinion is to use a Flash for playing sounds, i.e. make your links as Flash objects/buttons/text and assign sounds to them inside Adobe Flash on hover/click/etc.
Use SoundManager and will free up from a lot of headaches. Even more it will fallback nicely to flash if audio is not supported natively by browser.
However if you don't want to relay on a third party library there is another solution, a little bit daunting and exhausting but functional in every browser supporting the audio tag.
The first thing you need to do is to populate the audio tag with the source content. You can do this with the following lines of code:
<audio id = 'audio'>
<source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
Because there is not a common agreement between different browser vendors regarding the supported audio format we need to include each supported ones. If one browser does not support it, then will skip it and fallback to the next one. If none of them is supported then you can use flash as a fallback. Google AJAX Libraries API will facilitate much our work. Below is the full source code:
<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script>
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" onclick="playSound();">
<div id="fallback"></div>
<audio id = 'audio'>
<source src="http://www.hellopixel.net/click.mp3" type="audio/mpeg" />
<source src="http://www.hellopixel.net/click.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
<script>
function playSound() {
if (document.getElementById('audio').canPlayType) {
if (!document.getElementById('audio').canPlayType('audio/mpeg')) {
document.getElementById('audio').style.display = 'none';
swfobject.embedSWF(
"player_mp3_mini.swf",
"fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"http://www.hellopixel.net/click.mp3"},
{"bgcolor":"#085c68"});
} else {
document.getElementById('audio').play();
document.getElementById('fallback').style.display = 'none';
}
}
}
</script>
Fiddle: http://jsfiddle.net/SMR4V/
Note: I have not created the ogg file, so won't work in firefox, because FF is using ogg files.
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