I am trying to play the recorded video from Red5 pro video using the html 5 controls.
I managed to do the live streaming with .m3u8 extension and i can't play the videos already recorded [Video On Demand (VOD)].
I use the video js player for playing live stream ,but the same code is not working for recorded videos.
<video id=red5pro-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
Libraries
<script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="videojs/video.min.js"></script>
<script src="videojs/videojs-media-sources.min.js"></script>
<script src="videojs/videojs.hls.min.js"></script>
<!-- Red5 Pro SDK -->
<script src="red5pro/red5pro-sdk.min.js"></script>
<script src="script/hls-metadata.js"></script>
****JS Code : ****
How can i play it or could you provide me some samples if you have?
<script>
(function () {
var player = videojs('red5pro-video');
player.src({
src: "http://54.255.142.187:5080/live/kris.m3u8",
type: "application/x-mpegURL",
useCueTags: true
});
window.onOrientation(player, 'red5pro-video');
player.play();
})();
</script>
Related
I have a scenario, i have to play two video in HTML5 player in mobile browsers. The videos are playing fine in desktop browsers.
one thing i know ,
We not autoplay videos in mobile browsers, user has to tap on the video player to play video.
What i am doing, on video ended event of first video i am changing the src of the . but sometimes it is shaky or it does not plays the second video. user has to tap on play button to play 2nd video. I just need to exclude the 2nd tap. YouTube is doing this somehow. The ad video plays fine, the player minimize and then the 2nd video starts playing.
It takes much time to play the video on start.
Following is my sample implementation. try this url in iPhone or Android
http://abuzer.github.io/videojs-liverail-vpaid/sample.html
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
video1 = 'https://d3hh3bpy3h68fd.cloudfront.net/processed_videos/47fad7e0-7477-0132-8e95-123139254ded/_preview_640x480_2932_edit.mp4';
video2 = 'https://drgta5lwz3cck.cloudfront.net/uploads-public-videos/fd6eefe0-73cc-0132-a03a-12313b07582a/640x480.mp4';
video1Played = false;
video2Played = false;
$(function() {
$('#playAd').on('click', function() {
$('#playAd').hide();
$('#videoElement').attr('src', video1);
$('#videoSource').attr('src', video1);
$('#videoElement')[0].play();
video1Played = true;
});
$('#videoElement').bind('ended', function() {
if (video1Played && !video2Played) {
$('#videoElement').attr('src', video2);
$('#videoSource').attr('src', video2);
$('#videoElement')[0].load();
$('#videoElement')[0].play();
video2Played = true;
}
});
$('.videoElement').bind('progress', function(e) {
$('#state').hide();
});
$('.videoElement').bind('waiting', function(e) {
$('#state').show();
});
});
</script>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 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 -->
</head>
<body>
<button type="button" id="playAd">Click to Play</button>
<div id="videoWrapper" style="">
<div id="state" style="display:none; text-align: center">
<img style="-webkit-user-select: none" src="http://www.loadinfo.net/images/preview/14_cyrle_four_24.gif?1384388177">
</div>
<video x-webkit-airplay="allow" id="videoElement" class="video-js videoElement vjs-default-skin" height="50%" width="100%" controls src="" poster="">
<source id="videoSource" src="" type="video/mp4">
</video>
<!-- <video data-setup="{}" x-webkit-airplay="allow" id="videoElement1" class="video-js videoElement1 vjs-default-skin" height="50%" width="100%" controls src="" poster="">
<source id="videoSource" src="https://d3hh3bpy3h68fd.cloudfront.net/processed_videos/47fad7e0-7477-0132-8e95-123139254ded/_preview_640x480_2932_edit.mp4" type="video/mp4">
</video>
-->
</div>
</body>
</html>
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>
My home page does not have any videos, but other pages have video. What do you think of this code.
<script>
var ie=false;
<!--[if ie]>ie=true</p>-->
</script>
<body>
<script>
if (ie){
document.write("<a href='My Flash Page'>IE7,8,9 not IE10<a>")
} else {
document.write("<a href='My HTML5 Page'>all browsers + IE10, but not IE7,8,9<a>")
}
</script>
</body>
My home page does not have video, but the link will serve my other page in HTML5 or flash.
If broswer is IE7,8,9 then link goes to a web page with a flash player.(IE10 ignores code).
All other browers to include IE10 go to a web page with raw HTML5 video (full screen support)
I think it is a better way to have the script inside of the conditional IE comment than having the condition inside of the script.
<script type="text/javascript">
var ie=false;
</script>
<!--[IF IE]>
<script type="text/javascript">
ie=true;
</script>
<![endif]-->
We are having trouble firing events on Android 2.x devices. From our testing, Android 4.x and iOS 5/6 work correctly. But on Android 2.x devices, we are sometimes getting the "end" event and sometimes we are getting the "start" event.
It says it has cross browser compatibility but anyone run into these issues?
Here are the relevant parts of the code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://vjs.zencdn.net/c/video-js.css">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="videoplayer" style="margin:0 auto; text-align:center;">
<video id="video" class="video-js vjs-default-skin" controls autoplay preload="auto" width="300" height="300">
</video>
</div>
</body>
</html>
<script>
$(document).ready(function() {
_V_("video").ready(function() {
var thePlayer = this;
var startVideo = function() {
// do stuff
};
var endVideo = function() {
// do stuff
};
thePlayer.addEvent("play", startVideo);
thePlayer.addEvent("ended", endVideo);
});
});
</script>
I figured out the problem. I was able to reproduce it on a Android 2.2 and 2.3 emulator. No events were firing on video playback because there was an error loading the video.
Issues (For Android 2.x devices):
Playing a link from an HTTPS url was no working. The link we were using was an Amazon Cloudwatch URL which linked to an Amazon S3 bucket. When I changed the url to an HTTP vs HTTPS URL it worked.
I had to remove the autoplay attribute on the video element. Not sure why, but the video player in Android 2.x didn't like this.
Once I made these 2 fixes I was able to stream video on Android 2.x devices (as well as Android 4.x, iPhone and iPod)
I'm trying to get the vimeo universal player to play a new video in its iframe.
I don't want to initialise a complete new iframe each time I switch to a new video.
Is there a best practise to do this?
If your embed code is this:
<iframe id="vimeo_vid" src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
then you could reload the frame using jQuery:
<script type="text/javascript" src="jquery.js"></script>
<script>
function loadit() {
var loc = "http://player.vimeo.com/video/NEW_VID_ID";
var iframe = $('#vimeo_vid');
$(iframe).attr('src', loc);
}
</script>
Call that function to change the content, like this:
<button type="button" onclick="loadit()">Change Content</button>