I'm trying to embed flowplayer in my clients vbulletin forum and have succeeded with basic videos in the s3 bucket but am having trouble trying to implement rtmp. I've set up the distribution ok and can stream to a plain html page outside of vbulletin but am hitting a wall trying to write a custom bbcode to embed in posts.
My code for basic embed looks like this in my cusotom bbcode...
<object id="flowplayer" width="624" height="352" data="http://www.MY_DOMAIN.com/forums /flowplayer/flowplayer-3.2.14.swf" type="application/x-shockwave-flash">
<param name="movie" value="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="autohigh" />
<param name="flashvars" value='config={"clip":{"autoPlay":false,"accelerated":true,"url":"{param}"}}' />
</object>
And my working rmtp streaming looks like this...
<HTML>
<HEAD>
<TITLE>
Streaming Video with Flowplayer
</TITLE>
</HEAD>
<BODY>
<H1>HSL501 Observation Video</H1>
<script type="text/javascript" src="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.11.min.js"></script>
<div id="page">
<div id="rtmpPlayer" style="display:block;width:1000px;height:500px;"></div>
<script language="javascript">
// our custom configuration is given in third argument
flowplayer("rtmpPlayer", "http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf",{
plugins: {
rtmp: {
url: 'http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer.rtmp-3.2.11.swf',
netConnectionUrl: 'rtmp://XXXX.cloudfront.net/cfx/st'
}
},
clip: {
url: 'mp4:entries%207.mp4'',
provider: 'rtmp'
}
});
</script>
</div>
</html>
Any help would be much appreciated
Steve
Finally figured it out and hopefully this will help somebody else and save them having to search for hours like I did.
<object width="656" height="420" data="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf" type="application/x-shockwave-flash">
<param name="movie" value="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" /><param name="flashvars" value='config={"clip":{"url":"mp4:{param}","bufferLength":1,"provider":"dtfl"},"plugins":{"dtfl":{"url":"http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer.rtmp-3.2.11.swf","netConnectionUrl":"rtmp://XXXXX.cloudfront.net/cfx/st"},"controls":{"backgroundGradient":[0.1,0.3,0,0,0],"bufferGradient":"none","sliderColor":"#272727","backgroundColor":"#000","sliderGradient":"small","buttonOverColor":"#272727","borderRadius":"0px","buttonColor":"#565656","timeColor":"#CCCCCC","progressColor":"#565656","durationColor":"#ffffff","bufferColor":"#CCCCCC","progressGradient":"medium","opacity":1}}}' />
</object>
Steve, in Clip --> url , you are giving My_Domain, whereas it should be URI of your file present in S3. Let me know exactly what is happening when you load the page and play video, as we also faced issues in making it work , but finally did it after few fixes.
Related
I'd like to be able to configure controlsBelow and controlsHiding (always show controls below), but the only way I found to be able to do that is with VideoJS.setupAllWhenReady() (which appears to be a previous version of VJS), not with videojs() as the current docs (v4.12, at the time of this post) say to use. Nothing in the doc's option page mentions either of these options, so perhaps it's not supported anymore?
var setup = {
"techOrder" : ['html5', 'flash'],
"controls": true,
"preload": "auto",
"children": {
"controlBar": {
"children": {
"volumeMenuButton": true,
"muteToggle": false,
"volumeControl": false // displays volume control bar atop button
}
}
}
};
var player = videojs('player', setup, function(){
var myPlayer = this;
myPlayer.play();
});
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<div class="video-js-box">
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<param name="bgcolor" value="#f30000">
<param name="wmode" value="opaque">
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
</div>
After pretty thoroughly reading through the code, I don't see either of these options being available as I feared (I was just hoping someone might know something I didn't). I had already set the control bar to always display (don't fade out after a brief period of user inactivity, as is the default behavior) and to display below the video rather than on top of it via CSS, but in fullscreen mode the control bar would slip beneath the browser's viewport (eek). I ended up adding a :not() selector to keep the default behavior in fullscreen mode. That'll work for me.
var setup = {
"techOrder" : ['html5', 'flash'],
"controls": true,
"preload": "auto",
"children": {
"controlBar": {
"children": {
"volumeMenuButton": true,
"muteToggle": false,
"volumeControl": false // displays volume control bar atop button
}
}
}
};
var player = videojs('player', setup, function(){
var myPlayer = this;
myPlayer.play();
});
/* force control bar to display at all times if not in fullscreen mode */
.vjs-default-skin:not(.vjs-fullscreen).vjs-has-started .vjs-control-bar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* move under video if not in fullscreen (else it will disappear below the browser viewport */
.vjs-default-skin:not(.vjs-fullscreen) .vjs-control-bar {
bottom: -30px;
}
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<div class="video-js-box">
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<param name="bgcolor" value="#f30000">
<param name="wmode" value="opaque">
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
</div>
Currently the desktop version of my site uses flash player ( flowplayer) to stream videos.I would like to have a fallback to html5 just in case flash isn't available
So in case flash is not available , html5 should be used by default and the video should autoplay
I tried the following code but both flowplayer and html5 seems to load the video at the same time.I noticed that when i pause the video(playing with flowplayer) , i can still hear the video, implying that html5 player is loading the video as well.
<object id="flowplayer" width="640" height="360" data="./flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value=\'config={"clip":"./test.mp4", "plugins": {"controls": {"autoHide" : false} }}\' />
<video width="100%" height="100%" controls preload autoplay>
<source src="./test.mp4" type="video/mp4" />
</video>
</object>
Any help is appreciated
I am having issues with the Youtube embed iframe api. Does anybody know how to not show the "Like", "Share" buttons and the player controls in the end of the video. I eventually used the following parameters:
&autohide=1&showinfo=0&iv_load_policy=3&cc_load_policy=0&modestbranding=0&hd=1&wmode=transparent
I also added modestbranding option but it only hides the youtube logo while the video is playing.
Thanks in advance.
What about this?
<object width="640" height="360">
<param name="movie" value="https://www.youtube.com/v/Zhawgd0REhA?modestbranding=1&autohide=1&iv_load_policy=3&version=3controls=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/Zhawgd0REhA?modestbranding=1&autohide=1controls=0&iv_load_policy=3&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed>
</object>
Hey all i am having some problems with viewing a stream from the IP camera via its CGI commands:
http://192.168.1.99:99/videostream.cgi?user=UNhere&pwd=PWhere&resolution32=&rate=0
When creating the HTML page for the embedded code it looks like this:
<html>
<head><title>Demo of VLC</title></head>
<h1>Demo of VLC mozilla plugin - Example 1</h1>
<script type="text/javascript">
function mute()
{
vlc.audio.toggleMute();
}
function play()
{
vlc.playlist.play();
}
function stop()
{
vlc.playlist.stop();
}
function pause()
{
vlc.playlist.togglePause();
}
<body >
<!--[if IE]>
<object type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
version="VideoLAN.VLCPlugin.2" id="vlc" width="720px"
height="540px" events="True" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" >
<param name="MRL" value="http://192.168.1.99:99/videostream.cgi?user=UNhere&pwd=PWhere&resolution32=&rate=0" />
<param name="volume" value="50" />
<param name="autoplay" value="false" />
<param name="loop" value="false" />
<param name="fullscreen" value="false" />
</object>
<![endif]-->
<!--[if !IE]><!-->
<object type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
version="VideoLAN.VLCPlugin.2" id="vlc" width="720px" height="540px" events="True" >
<param name="MRL" value="http://192.168.1.99:99/videostream.cgi?user=UNhere&pwd=PWhere&resolution32=&rate=0" />
<param name="volume" value="50" />
<param name="autoplay" value="false" />
<param name="loop" value="false" />
<param name="fullscreen" value="false" />
</object>
<!--<![endif]-->
</div>
<br />
</div>
<iframe name="action_zone" style="display:none"></iframe>
<div id="controls">
<input type="button" onclick="play()" value="Play" />
<input type="button" onclick="pause()" value="Pause" />
<input type="button" onclick="stop()" value="Stop" />
<input type="button" onclick="mute()" value="Mute" />
</div>
</body>
</html>
Now if i load up that page using IE9 it asks me to enabled blocked content and once i do i can play the stream just fine with the page above. However, loading the same page up using webbrowser1 control in vb.net results in nothing being played or asked to have permission.
So my question is: How can i reproduce the same results when loading it up in IE9 standalone in my VB.net app? I just dont get what its doing wrong in the .net VS the standalone IE9?
I've enabled every activex/script/java in the internet options that i know how too and it still produces nothing in the .net app.
Here is a screen shot with it inside IE9 standalone:
Here is the .net version of the same page:
Any help would be great!
David
I have develop a MVC3 Application in that i have use html5 video controls when i run the application it is playin Chrome but when i try to play in IE8 Browser it doesn't play the video just it show the white page only...How to play the video in all Browsers please help me..
Here is my code what i did in my page
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"
width="640" height="360">
<source src="../../Videos/Nenu Nuvvuantu - Orange - MyInfoland.mp4" type="video/mp4" />
<%-- <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />--%>
<source src="../../Videos/Nenu Nuvvuantu - Orange - MyInfoland.ogv" type="video/ogv" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
width="640" height="360">
<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={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'../../Videos/Nenu Nuvvuantu - Orange - MyInfoland.mp4','autoPlay':false}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"
width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>
There's a nice standard way of setting up HTML5 video with flash and other fallbacks.
Please see Video for Everybody for a nice generator of HTML5 tags with fallback options.
Alternatively, here's another great library, with JS/CSS code to make it work consistently.
I have used following way to fix playback issue for IE and this worked for me.
<video id=0 controls width="640" height="360">
<source src="new/db.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="new/db.webm" type='video/webm' >
<source src="new/db.mp4" type='video/mp4'>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="500">
<param name="movie" value="db.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="11.0.0.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="db.swf" width="500" height="500">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="11.0.0.0">
<param name="expressinstall" value="../../Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
<script type="text/javascript">swfobject.registerObject("FlashID");</script>
<script src="../../Scripts/swfobject_modified.js" type="text/javascript"></script>
// you can download swfobject_modified here
http://code.google.com/p/fanarshavin/downloads/detail?name=swfobject_modified.js&can=2&q=
I'm failed to switch between videos on page with JWPlayer in IE8. Moreover, its JS API simply doesn't work in IE8.
There are also top players: medialement, VideoJS, SublimeVideo. So, I'm trying mediaelement now.