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.
Related
I would like to embed a video stream from an IP camera into a website.
The URL for this stream looks like this:
rtsp://my.camera.com/axis-media/media.amp
If I open the stream in VLC it is working fine.
I have tried to use stuff from here but nothing is working:
https://wiki.videolan.org/Documentation:WebPlugin
It can be done with VLC or Quicktime but the actual problem your most likely experiencing is that web browsers have stopped suporting the VLC and Quicktime plugins. At time of writing this reply only Firefox still supports this plugin.
This also means you need VLC or Quicktime installed on your PC (Which I gather you have since it plays the steam in VLC).
Try Firefox for now to see if your stream works.
If it asks to Activate the VLC / Quicktime plugin click Allow or Allow and remember.
When using VLC the HTML Code in your website should resemble this:
<div id="cctv-container">
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" id="vlc" events="True" width="640" height="480">
<param name="Src" value="rtsp://my.camera.com/axis-media/media.amp"/>
<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" target="rtsp://my.camera.com/axis-media/media.amp" width="640" height="480"/>
</object>
</div>
The only way at present to have it stream in Chrome or IE is to have VLC transcode the RSTP stream for you to a HTML5 supported stream.
Here is a sample VLC command to do just that:
vlc rtsp://my.camera.com/axis-media/media.amp :network-caching=1000 :sout=#transcode{vcodec=theo,vb=1600,scale=1,acodec=none}:http{mux=ogg,dst=:8181/stream} :no-sout-rtp-sap :no-sout-standard-sap :sout-keep
The new output stream can then be embedded in a HTML5 shim:
You can obviously change the port or encoding type as you see fit e.g.
:http{mux=flv,dst=:1234/stream}
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
I'm wondering if it's possible to make a browser play a AVI file within a video tag.
Everything I found on the web talking about it focus on MP4 and Ogg formats but nobody talks about the AVI format.
The only solution I found is to drop the video tag and make the video playable using JW Player.
Only the DivX web player can stream avi files. actually, theres a plug in for vlc to stream avi files also, but its buggy.
Sometimes it's a pain in the ass to get a solid answer. its one of the big sucks of the internet.
<object id="ie_plugin" classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616"
width="660"
height="300"
codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="custommode" value="stage6" />
<param name="autoPlay" value="false" />
<param name="src" value="link-to-avi" />
<param name="bannerEnabled" value="false" />
<embed id="np_plugin" type="video/divx"
src="link-to-avi"
custommode="stage6"
width="660"
height="300"
autoPlay="false"
bannerEnabled="false"
pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>
note where it says "link-to-avi" twice :)
Today there are excellent approaches to deal with it. One of them is the module fluent-ffmpeg found on npm.
It requires the previous installation of FFMPEG
The support of avi isn't direct. It will be necessary build a server with node to serve your html.
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
I have two quicktime movie files embedded in one web page. I have set autoplay="false" to prevent them both from playing at the same time, but they still load at the same time. Can I prevent them from loading until the user clicks the play button?
autohref="false" is supposed to do this but it does not seem to work.
Apple's documentation for the EMBED element
[BEGIN EDIT - 2010/03/30]
The problem here, I think, is that there is no control to modify buffering behavior. The AutoHREF parameter refers to preloading the value of an href parameter (or perhaps an HREF embedded in the video itself?), not to buffering the video.
I'm currently using a modification of this technique on some pages and Javascript with Modernizr to dynamically insert different video embeds depending on browser support.
I transcode my video to ogg/theora/vorbis like this with VLC (on a Mac; it's very similar for *nix) with 1024kbps bitrate for video and 128kbps bitrate for audio:
/Applications/VLC.app/Contents/MacOS/VLC \
--rc-fake-tty -I dummy \
${original_video} \
':sout=#transcode{vcodec=theora,vb=1024,acodec=vorbis,ab=128,audio-sync}:standard{mux=ogg,dst=${ogg_file},access=file}' vlc://quit
And to transcode to MP4/H.264/AAC (same bitrates) (assuming VLC supports M4A/AAC audio):
/Applications/VLC.app/Contents/MacOS/VLC \
--rc-fake-tty -I dummy \
${original_video} \
':sout=#transcode{vcodec=mp4v,vb=1024,acodec=mp4a,ab=128}:standard{mux=mp4,dst=${m4v_file},access=file}:sout-transcode-soverlay=0' vlc://quit
(Using the original, high-quality video would be best, but this should work for any format VLC can decode.)
Just for giggles, I also use the HTML5 audio element, when available, and here's how I transcode an mp3 to ogg/vorbis (using lame and vorbis-tools) at 128kbps (VBR) and high quality:
lame --decode ${mp3_file} - \
| oggenc -r -b 128 -q 9 -o ${ogg_file} -
And mp3 to m4a/AAC (using lame and faac):
lame --decode ${mp3_file} - \
| faac -w -s -o ${m4a_file} -
(Of course using the original raw PCM/WAV would be better.)
(IANAL, but:) It's important to note that both H.264 and AAC are under patent (and licensing is exorbitant). There are some fears that Theora may be subject to so-called submarine patents, but it and Vorbis appear to be unencumbered currently.
[END EDIT]
Did you find an answer to this? I'm seeing the same behavior. (I've been assuming that parameter/attribute names are not case-sensitive, as even the Apple docs inconsistently use various case schemes.)
In case there's any confusion, I think what the original questioner (and I) wants is for the Quicktime movie not to be downloaded at all until the user clicks the "play" button. I have several videos on the same page, and it's unlikely that the user will watch them all; I don't want them downloaded until they're explicitly requested. The "autohref" parameter is supposed to ensure this behavior when set to "false", but at least in Firefox 3.6 with Quicktime plugin 7.6.3 on Mac OS 10.6.2, it doesn't appear to work.
<object
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="332"
height="184"
id="video-0"
>
<param name="src" value="video/sony-ps3.mov" />
<param name="AllowEmbedTagOverrides" value="True" />
<param name="AutoPlay" value="False" />
<param name="AllowEmbedTagOverrides" value="True" />
<param name="AutoPlay" value="False" />
<param name="AutoHREF" value="False" />
<param name="EnableHREF" value="False" />
<param name="EnableJavascript" value="True" />
<param name="ShowLogo" value="False" />
<param name="Volume" value="60" />
<param name="wmode" value="transparent" />
<embed
width="332"
height="184"
src="video/sony-ps3.mov"
type="video/quicktime"
pluginspage="www.apple.com/quicktime/download"
name="video-0"
AllowEmbedTagOverrides="True"
AutoPlay="False"
AutoHREF="False"
EnableHREF="False"
EnableJavaScript="True"
ShowLogo="False"
Volume="60"
wmode="transparent"
></embed>
</object>
I haven't tried this yet but maybe it will work it's the first thing listed autohref="false"
http://web.mac.com/studybuddys/iWeb/studybuddys/12%20Multimedia_files/06%20Apple%20QT%20Embed%20Tag%20Attributes.pdf
I'm trying to do this for audio (not have it load till the play button is clicked) but i don't have an href value all I have is a src value
ps - I just noticed in your original posting that you said autohref="false" is supposed to do this but doesn't work
I guess I'll just add that I just have a src value and no href value i am trying to find the same answer but with audio
It depends on how you embed the QuickTime movies. But it should respect the autoplay flag. Just putting it in tagswill work, but I think it's not the correct way to do it. Have you done it like the code below?
<object width="160" height="144"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov">
<param name="autoplay" value="false">
<param name="controller" value="false">
<embed src="sample.mov" width="160" height="144"
autoplay="false" controller="false"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
Update
Or do you mean the movies do not play on page load, but both start playing when the user interacts with one of them? If the latter is the case it would probably be better to set a placeholder image which a user can click and then load the appropriate content, instead of loading both applets at the same time. Doing it like this takes less resources, because the end user machine would only have to load the QuickTime plugin once a user has activated a particular movie.