I have a webpage which opens .flv video files in light box (top_up-min.js/modal). Now i am trying to open the .mp4 version of same video files using JW player 6 in a light box.
The code i tried is working to open a video in lightbox [jquery.jwbox.js ] and suggested code opens a hidden div as a lightbox .But i have below issues
1.After clicking the video ,click anywhere else other than “close button” the video still closes.
In IE 8 or above , even after closing the video ,you can hear the audio. It only stops when you refresh the page .
Does anyone already using this have any fix for this?
2.Is there any other jquery light that can be used for JW player (mp4 format)
Thanks
<head id="Head1" runat="server">
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="jwplayer/jwplayer.js" ></script>
<script type="text/javascript" src="/js/jquery.jwbox.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jwbox.css" />
<script type="text/javascript">jwplayer.key = "key";</script>
<title></title>
<script type="text/javascript">
//this function i tried to close the video because the existing jquery one
closes video even when u touch outside the box.but its throwing js error.
function fnClose() {
document.getElementById('jwbox_hidden').style.display = 'none';
document.getElementById('jwbox_background').style.display = 'none';
jwplayer().stop(true);
return false;
}
function loadVideo(myFile,title) {
document.getElementById("videoTitle").innerHTML = title;
jwplayer("player").setup({
file: myFile,
width: '640',
height: '480',
volume: 100,
autostart: true,
primary: "flash"
});
}
</script>
</head>
<body>
<p>
Click the link to display a JW player with a video in the JW Box.
</p>
<div class="jwbox">
<ul> <li>Nursery Workers</li></ul>
<ul> <li>Computer Programmers</li></ul>
<ul> <li>Child Care Workers</li></ul>
<div class="jwbox_hidden" id="jwbox_hidden">
<div class="jwbox_content">
<label id="videoTitle" class="te_title"> </label>
<a class="te_close_link" style="display: block;" onclick="fnClose();" ></a>
<div id="player"></div>
</div>
</div>
</div>
<br />
</body>
I know this might not be the answer you're precisely looking for but it worked when I tested it. I haven't found the precise cause of the problem. This is a hacky workaround.
If you look in jwbox.js there's a try catch block like this:
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) { }
I added your fnClose() into the catch block:
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) { fnClose() }
Alternatively, this seems to perform faster:
try {
fnClose();
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) { }
That at least invokes fnClose() when if sendEvent("STOP") fails, which is, I believe, the root of the problem.
Hope that helps, sorry this is my first StackOverflow answer :)
-Pablo
Related
I'm studying Dojo 1.10.4, my problem is that the onClick event does not work on dijit/MenuItem. I tried it on other item widgets like dijit/CheckedMenuItem and dijit/RadioMenuItem, none of their click events work, and the API docs didn't give any tips about it.
At last, I found it only works if it's contained in dijit/MenuBar. Should Item widgets be contained in dijit/MenuBar or dijit/Menu? How are the events processed on dojo widgets?
For example:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async:true,parseOnLoad: true"></script>
<script>
require(["dojo/parser"],function(parser){
parser.parse();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/MenuBar" >
<div data-dojo-type="dijit/MenuItem" onclick="alert();">it works</div>
</div>
<div data-dojo-type="dijit/MenuItem" onclick="alert();">it doesn't work</div>
</body>
</html>
In this case MenuItem needs a ContainerWidget like Menu or MenuBar. You add the Item as a child like :
require([
"dojo/dom",
"dijit/MenuItem",
"dijit/DropDownMenu",
"dijit/form/DropDownButton"
],
function(dom,MenuItem,DropDownMenu,DropDownButton){
var myMenu = new DropDownMenu();
var menuItem1 = new MenuItem({
id:"M1",
label:"Show M1",
onClick:function(){
//do what you want to do here
}
});
myMenu.addChild(menuItem1);
});
Studying this might help you too to understand how it works.
http://dojotoolkit.org/reference-guide/1.10/dijit/DropDownMenu.html#dijit-dropdownmenu
Regards
i use jwplayer 6 , i have problem when i want to Customize my player (put skin or autostart option .... ) the player disappear
this code work good :
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic'
});
</script>
</body>
but when i put something like this the player disappear and show just (Loading the player...) :
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic'
autostart: true,
mute: true
});
</script>
</body>
or if there is any other way to customize player please tell me , thanks
Your code has error in the 'file' line, try this:
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic',
autostart: true,
mute: true
});
</script>
</body>
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>
ive this code to run live streaming using jwplayer , its 2 part one if users was using PC and other if user using iphone , setting working fine for pc but when comes to html5 auto start never works , any tips to fix my configuration for html5
PS player working on iphone just when i click play ,
<!DOCTYPE html>
<html>
<head>
<title>live stream!</title>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<center>
<script type='text/javascript' src='/player/jwplayer.js'></script>
<div id='container'></div>
<script type="text/javascript">
jwplayer('container').setup({
autostart: "true",
file: "http://184.172.184.2:8000/;listen.pls",
height: 300,
width: 600,
players: [
{ type: "flash", src: "player/player.swf", config: {provider: "sound"} },
{ type: "html5", config: {provider: "sound"} }
],
});
</script>
<br />
<br />
<br />
Please click play then wait 10 second for buffer ..... , Thanks
</center>
</body>
</html>
yo can't. but you could detect the ios browser and redirect it to the video itself, causing it to start..
javascript:
function isiPhone(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1) ||
(navigator.platform.indexOf("iPad") != -1)
);
}
if(isiPhone()){
window.location = "path/to/video.mp4";
}
or php:
<?php
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
if(
strstr($userAgent,'iphone') ||
strstr($userAgent,'ipod') ||
strstr($userAgent,'ipad')
)
{
header ("Location: path/to/video.mp4");
}
?>
Unfortunately, autostart does not work with iPhone's. This is what I gathered on some forums online.
From what I gathered, autostart won't work on iOS devices as media playing needs to be activated via user interaction. This leads to all kind of strange behaviour with playlists, for example -- I'm experiencing inconsistent firing of the "ended" event when playing mp3 files, tested with JWPlayer and pure HTML5 Audio objects.
</html>
<head>
</head>
<body>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://rgksugan.in/"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"><iframe>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'194541653919499', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
</body>
<html>
This is my HTML page. I am expecting a Login with Facebook button in my page. But it doesnot appear. What is the problem?
Hi are you embdding facebook connect code in your html tag? Other thing you have to load your jsdk either synchronously or asynchronously. Put the code of like button after that. First make your html tag like this
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
and then try this just after your <body> tag
<body>
window.fbAsyncInit = function() {
FB.init({
appId:'194541653919499', cookie:true,
status:true, xfbml:true
});
};
(function() {
var e = document.createElement("script");
e.type = "text/javascript";
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
</script>
Use this code for your like button. Your third problem is that you are having two facebook connect statements in your code. When you have connected with facebook using a asynchronously then you dont need to connect again when you are putting like button code. use this code
<fb:like href="http://rgksugan.in/" show_faces="true" width="450" font=""></fb:like>
iframe end tag of your like button is not well formatted.
Change
<iframe src="http://www.facebook.com/plugins/like.php?href=http://rgksugan.in/"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"><iframe>
to
<iframe src="http://www.facebook.com/plugins/like.php?href=http://rgksugan.in/"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>