Adding options to video.js - video.js

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>

Related

Display video in laravel-8

you can see i can store video in my public/video folder
Now I want to show it on my news/show.blade.php but its not working
This is my show.blade.php
<video width="320" height="240" controls>
<source src="/video/{{ $news->video }}" type="video/mp4">
<source src="/video/{{ $news->video }}" type="video/ogg" />
</video>
This is my NewsController.php
public function show(News $news)
{
return view('news.show',compact('news'));
}
After all that I can just do it but video is not loading and playing see image

"Error: Video could not be decoded" only when video tries to play in IE11

When trying to play/test a video (MP4) on my web page, I select the play button and see this every time:
Video Could Not Be Decoded
That shows up after about 7 seconds of play in IE11, yet it plays fine in Chrome and Firefox. Any ideas?
Environment:
video-js player-v4.11.4, with a flowplayer fallback
IE11
Windows 7 PC
Here is the player code:
<video id="_1200k.mp4" class="video-js vjs-default-skin"
preload="none" width="445" height="340" controls
poster="[var.thumb_file]" data-setup='{techOrder: [‘flash’,’html5’}'>
<source src="http://..........s3.amazonaws.com/[var.video_play]" type='video/mp4' />
<object class="vjs-flash-fallback" width="445" height="340" type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="/flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["/[var.thumb_file]", {"url": "http://.........s3.amazonaws.com/ [var.video_play]","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
Although I haven't personally tested this, I feel very confident saying that there's very little chance that the Flowplayer fallback works as a drop-in replacement for the Video.js swf. Why are you doing this in the first place, when Video.js has its own fallback?
I'd be surprised if you weren't seeing other issues as well. For instance, the example you provided has invalid JSON in the data-setup attr, so that should throw a JSON parse error.
So back to the original question about Flash fallbacks...if you're attempting to play an mp4 back in IE11, why are you forcing Flash in the first place? IE11 supports h264 natively, so a Flash fallback is unnecessary.
Altogether, your <video> tag should look something like this:
<video id="_1200k.mp4" class="video-js vjs-default-skin" preload="none"
width="445" height="340" controls poster="..." data-setup='{}'>
<source src=".../movie.mp4" type="video/mp4"></source>
</video>

Fallback to html5 video if flash is not available

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

Viewing IP camera via embedded VLC

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

How to play the html5 video in IE8 Browsers

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.