HTTP Dynamic Streaming with video.js flash fallback - video.js

I am evaluating video.js flash fallback capabilities for live streaming.
I can stream using either RTMP or Adobe HTTP Dynamic Streaming.
Hovewer, nonne of the options seems to be supported,
here is my demo set up
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://mysite.com:1935/live/android.stream/manifest.f4m" type="video/mp4" />
<source src="rtmp://mysite.com/live" type="video/mp4" />
<source src="http://mysite.com:1935/live/android.stream/playlist.m3u8" type='video/mp4' />
here is what I see in the firebug console
Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://mysite.com:1935/live/android.stream/manifest.f4m failed.
Specified "type" attribute of "video/mp4" is not supported. Load of media resource rtmp://mysite.com/live failed.


I went through the source code of the video.js (both JavaScript and ActionScript) and couldn't find any support for manifest files.
That is a feature I would also like to see...


Rtmp is now supported in video.js an example can be seen by using there already packaged file or this:
<!DOCTYPE html>
<html>
<head>
<title>Video.js</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" data-setup='{ "techOrder": ["flash"] }'>
<!-- Stream testing -->
<source src="rtmp://rtmp.jim.stream.vmmacdn.be/vmma-jim-rtmplive-live/jim" type='rtmp/mp4'>
</video>
<p>Source from: http://support.akamai.com/flash/</p>
</body>
</html>
Hope this helps anyone currently stuck I know this has been dead for awhile.

Related

How to run subtitles in video using video.js for Opera, Chrome?

I wrote code to insert subtitles in the video
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>name</title>
<link rel = "stylesheet" href = "skript/video-js.min.css" />
<script src = "skript/video.min.js"> </script>
</head>
<body>
<video
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{}'>
<source src="1.mp4" type="video/mp4">
<track label="rus" kind="subtitles" srclang="ru" src="sub/rus.vtt"/>
<track label="eng" kind="subtitles" srclang="en" src="sub/eng.vtt"/>
</video>
</body>
</html>
But it does not work with browsers Opera, Chrome
Is there any way to fix this?

Did you try to embed vtt/subtitles files in m3u8 package? It works with all browsers.

videoJS HLS not working on Production Server but works in Localhost

I've been trying to make this videoJS HLS work. It works perfectly when I do it in localhost but when I upload it to the server it gives me "VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video."
Here's the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
<script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>
</head>
<body>
<h1>Video</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" type='application/x-mpegURL'>
</video>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
Can anyone tell me if I need to do something with the server to make this work? Thanks

Try to verify if your server has CORS activated.
Go to videojs cors documentation: https://github.com/videojs/videojs-contrib-hls
and here for test:
http://client.cors-api.appspot.com/client

No Controls at flash fallback

I want to use the free HTML5-videoplayer Video.js in a project.
In general all of the functions are ok, but i have a problem.
For information: I am using VideoJS 4.3.
I have a problem with the flash fallback in IE7/8. The fallback is working, but when there isn't a controlbar. I think the controlbar is not just hiding, but it is not there. Only the time, the volumebar and the slider appeared. Another problem is, that the play button at the beginnen is not shown in the fallback. I've searched for this problem but the solutions don't work for me. I think it does not work, because the solutions were for older versions of video.js. What can I do so that the controlbar and the play button appears in the fallback?
Here my embedded code:
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="none" width="480" height="320" poster="media/spardabank.jpg"
data-setup="{}">
<source src="SpardaBankHD.mp4" type='video/mp4' />
<source src="SpardaBankHD.webm" type='video/webm' />
<source src="SpardaBankHD.ogv" type='video/ogg' />
</video>
In the head is this:
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
Thanks for helping,
Wuz

Video-JS + Colorbox, loading dynamic videos

Having an issue that has been frustrating me the last few days.
I have some videos on a site that are loaded dynamically from sitecore, and display on a page with thumbnail images. When you click those images you are taken to a lightbox with the video.
The problem is, the video plays in Chrome, Firefox and IE8 -, but not IE9 +. I thought it may be an encoding issue, but I have converted this video so many times to every format available to the web to no avail.
I am setting the plugin to load the video as flash first, then if flash isn't available, load as html5. This will clear all worries in terms of browser support of HTML5 video.
I was thinking that it may be the lightbox and videoJS plugin fighting with each other, or the fact that i am hiding videos and showing them, which i know can sometimes cause issues. I have decided to use a different lightbox, and people seem to have said that colorbox is a decent one to use with videoJS, especially since it has some built in callbacks onLoad.
On to the problem and the code:
The problem:
This lightbox is working, but videoJS seems to throw a few errors when i try and reset the player, which is breaking the videos in IE since its such a dumb browser.
As you can see in the demo link at the bottom, the videos play in IE just fine when they are just set on the page, but when you open the lightbox by pressing "vid1" or "vid2" you are riddled with console errors and the videos no longer play.
The code:
HTML + jScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> </script>
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<link type="text/css" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".inline", this).colorbox({
inline: true,
rel: 'videohook',
width: '650px',
onLoad: function() {
//grab the video ID and store it
var vidID = $(this).attr("data-vidID");
//Reset the video players
videojs.players = {};
//set the videoJS player for this video.
videojs(vidID);
}
});
});
</script>
<a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
<a rel="videohook" data-vidID="my_video_2" class="inline" href="#video_2">vid 2</a>
<div id="video_1" class="video">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="none" width="640" height="264" poster=""
data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type='video/ogv'>
</video>
</div>
<div id="video_2" class="video">
<video id="my_video_2" class="video-js vjs-default-skin" controls
preload="none" width="640" height="264" poster=""
data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type='video/ogv'>
</video>
</div>
</body>
</html>
Console errors im getting:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'vjs_getProperty'
LIVE DEMO:
Go here to see the errors for yourself: http://kodistro.com

In this case, my solution is to inject the video tag HTML into the lightbox content (when opening) and then call videojs().
So, in pseudo-code:
<script type="text/javascript">
$(document).ready(function() {
$(".inline", this).colorbox({
inline: true,
rel: 'videohook',
width: '650px',
height: '274', //the size most be fixed
onLoad: function() {
var appendVideo1 = '<video id="my_video_1"......> </video>'; //insert the <video> tag. Note.Remove attribute data-setup='{"techOrder": ["flash", "html5"]}'
$("video_1").append(appendVideo1);
},
onComplete: function() {
videojs(my_video_1); //initialize video-js
},
onClosed: function() {
videojs(my_video_1).dispose(); //destroy video-js
}
});
});
</script>
<a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
<div id="video_1" class="video">
</div>

After attempting to ge the instruction of vide.js correct, does this code look correct?

Help with set up instructions of video.js
I got limited help trying to set up this player:
http://www.videojs.com/docs/setup/
The link instructions are pretty short/(easy for someone more skilled than me), but I need some advice, please. The self-hosted instructions show this:
<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
<script src="http://example.com/path/to/video.js"></script>
<script>
_V_.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
The help I got added this code to appropriate file:
<link href="http://theurl.com/video-js/video-js.css" rel="stylesheet">
<script src="http://theurl.com/video-js/video-js.css"></script>
<script>
_V_.options.flash.swf = "http://theurl.com/video-js/video-js.swf"
</script>
<video id="mp4" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://theurl.com/uploads/" type='video/mp4' />
</video>
According to the very short instructions at http://www.videojs.com/docs/setup/
does this new added code look right?

It looks correct, though you'll want to make sure the src attribute of the source tag points to a specific video file that's already been uploaded to the web somewhere.
<source src="http://theurl.com/uploads/MY_VIDEO.mp4" type='video/mp4' />