I did looked at this question, but the asker didn't got any reply. Still, I'm giving it a try.
I want to embed a video file on a html page. The code works fine on IE but doesn't work on firefox.
The code:
<object id="WMPlay" width="640" height="480" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,70" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="URL" value="XYZ.wma" />
<param name="AutoStart" value="false" />
<embed name="WMplay" width="640" height="480" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
src="XYZ.wma" allowchangedisplaysize="True" showcontrols="1"
autostart="false" showdisplay="1" showstatusbar="1">
</embed>
</object>
Please note that I'm not allowed to display video using any third party tool (like flash).
Can someone please tell what am I missing? Or a better solution..something which is browser independent... :)
Looks like firefox needs a plugin, check this test page:
http://plugindoc.mozdev.org/testpages/wmp11.html
That's probably an issue with .wmv extension, which is a Microsoft proprietary format.
You should convert your video to a more "web-friendly" format, and use this code to ensure cross-browser/html version compatibility:
http://camendesign.com/code/video_for_everybody
Fire fox only displays .ogg and WebM...
www.w3schools.com/tags/tag_video.asp
Related
I am using embed tag in Mozilla. Video start playing on page load only. Autoplay (autoplay="false") is not helping me. Can any one help me please?
Thanks in advance !
<embed id="video1" src="Wildlife.wmv" type="application/mediaplayer" autoplay="false" width="470" height="280"></embed>
This is a know bug for Chrome and Firefox. Try using another source extension, .wmv is also not valid for Mac users without Flip4mac.
Also this bug can be fixed by using <object> like this:
<object width="470" height="280" type="application/x-mplayer2">
<param name="fileName" value="Wildlife.wmv">
<param name="autostart" value="0">
</object>
The bug in the <embed> can be caused by using the wrong type, so move on to the better solution:
Best solution in this case
Then again, the best solution for using <embed> is setting the plugin url, type and autostart like this:
<embed type="video/x-ms-wmv" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" autostart="0" width="470" height="280" loop="0" src="Wildlife.wmv"></embed>
I have set up a RTSP stream from my raspberry pi camera module using this:
raspivid -o - -t 9999999 |cvlc -vvv stream:///dev/stdin --sout '#rtp{sdp=rtsp://:8554/}' :demux=h264
I am able to view it using VLC with: rtsp://192.168.0.18:8554/
When I attempt to embed the video in a web page the video does not show.
<!DOCTYPE html>
<html><body>
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
width="800" height="600" id="vlc" events="True">
<param name="Src" value="rtsp://192.168.0.18:8554/" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
target="rtsp://192.168.0.18:8554/" ></embed>
</OBJECT>
</body></html>
What is the best way to embed the video feed in HTML to view it in a web browser?
Well this is a bit tricky - when you open the RTSP link directly with VLC it should work since VLC comes packed with all the codecs (in your case H264). However I'm not aware of what happens with the browser plugin - does it reuse the codecs from the VLC installation or what. It could be that a codec is simply missing on the viewer's end but I'm not sure about that. Also, using the plugin you could run into issues with support among different browsers and whatnot.
The html5 video thing is a bit sketchy since as far as I remember (and this may have changed) neither live H.264 nor WebM is fully supported across all browsers. I'd still go with WebM since Chrome and Firefox has it and only IE requires an add-on. Check this question, it has a valid WebM streaming command line in the response and see if that works for you. If it does you should be even able to omit all the embed stuff and just use a plain HTML5 video tag.
My videos are working properly in almost every other browser except IE9. However, it may just be the configuration of IE9 that is causing this issue since on my other laptop with Windows 8 64-bit and IE10 64-bit, when i switch the browser mode to IE9, it works correctly. Here is the issue:
I am using Windows 7 64-bit, IE9 64-bit and 32-bit. My website has videos inside nested JQuery tabs. A tab is loaded at random. If one of the tabs containing a video is chosen to be initially loaded, the video shows up fine. If not, the video shows up blank, however, I am able to right-click where the video should be, select play, and then the video will play as normal and the controls appear.
Here is a link to the page that is experiencing the issue:
http://northernicefastpitch.com/index.php?page=team&team=1
Go to the Scalzitti tab, then select videos to find where the video should be displayed.
Here is my video code:
<video width="310" height="200" controls="controls">
<source src="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4" type="video/mp4">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="310" height="200">
<param name="src" value="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4">
<param name="type" value="video/mp4">
<param name="controller" value="true">
<param name="autoplay" value="false">
<embed src="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4" type="video/mp4" pluginspage="http://www.apple.com/quicktime/download/" width="310" height="200" controller="true" autoplay="false">
</object>
</video>
I am hosting this website on a linux Centos 6.3 server using NGINX so .htaccess files won't cause any problem. I have looked into the "IE9 HTML5 video visible only after cache clearing" post and it did not help me. I have probably tried about 30 different solutions and nothing has worked for me (which is why I am leaning towards IE9 is configured improperly on this laptop).
Please let me know if any of you are able to see the videos properly, with controls, on IE9. If it just this laptop that has the problem, I am definitely ok with that.
Thanks in advance.
John
I couldn't find any viable solution for this problem, but I did come up with a workaround. I was using this workaround only for IE, but after coming across a different problem with Chrome, I decided to use this on all browsers.
<div style="display:inline-block; margin-top:-14px; padding:5px;">
<video id="video14" width="310" height="200" style="background:#000000 url('images/play.png') no-repeat;" preload="none" controls>
<source src="videos/video1.mp4" type="video/mp4">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="310" height="200">
<param name="src" value="videos/video1.mp4">
<param name="type" value="video/mp4">
<param name="controller" value="true">
<param name="autoplay" value="false">
<embed src="videos/video1.mp4" type="video/mp4" width="310" height="200" controller="true" autoplay="false"></embed>
</object>
</video>
<script>
document.getElementById('video14').onclick = function () {
document.getElementById('video14').play();
document.getElementById('video14').onclick = '';
document.getElementById('video14').style.background = '';
};
</script>
</div>
Above, I give my video an id and background image of a play button. I then set some javascript to play the video when clicked and also remove the onclick function as well as the background after it is clicked for the first time. I had to set preload="none" due to the issue with Chrome. Also, instead of using a background, you can use the poster attribute. If using the poster attribute, you don't need the additional javascript to remove the background.
Edit: I tried using poster attribute, but it didn't work in IE9, so sticking with the background for now. Also tried using video.js and poster but that also didn't work in IE9. In IE9, preview poster is still being displayed even with preload="none" when the tab with videos is chosen to be the default tab (default tab chosen at random). I am ok with this random occurrence though.
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 am trying to get a movie uploaded from a mobile device to play in a browser.
It works fine in Chrome and FF and IE9(compatibility mode) but I cannot get it to play in IE9 not in compatibility mode.
My embed code is:
<video id='vid' class='video' width='274' height='169' controls='controls' preload='load' autoplay='autoplay'>
<source src='/videos/vid1.mov' />
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" >
<param name="src" value='/videos/vid1.mov'>
<param name="autoplay" value="true">
<param name="loop" value="false">
<param name="controller" value="true">
<embed src='/videos/vid1.mov' width="274" height="169" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/"></embed>
</object>
</video>
At first I was just trying the Html5 embed code, but that didn't work, so switched it out for object and embed which didn't work either.
I found that I can combine both here: http://www.w3schools.com/html/html_videos.asp
but still it doesn't work anyway.
After spending 2 hours googling and trying different variations of this I need help!
IE9's HTML5 specs only support H.264 video encoding, so it's worth checking if the .mov was encoded properly
http://blogs.msdn.com/b/ie/archive/2010/04/29/html5-video.aspx
It could also help to supply at least 2 formats of your video, as not all browsers support one particular format. Perhaps .mp4 and .mov? If you're really ambitious swap .mov with .ogv, add a flash-based fallback as your object tag and you should be pretty well set.
change the mime type (as the server delivers it to the browser) from video/quicktime to video/mp4. Simplest way to do this, would be to add this to your .htaccess file:
AddType video/mp4 .mov
Everything should be good once you have this in place. The only other thing you'll likely see is videos coming from an iPhone being rotated 90 degrees to the left. This is the raw format stored by iOS. You'll have to take care of that on the iPhone or the server