HTML5 video player: dynamically loading videos - javascript

I need to know how to make the player play a video dynamically
for example: http://video.com/viewer.php?file=123.flv
where 123.flv will be played
i am working with jwpayer
<script type="text/javascript">
jwplayer("test").setup({
file:"a.mp3",
hieght:360,
modes:[
{ type:'html5' }
]
});
thanks in advance

To work with your original code:
<script type="text/javascript">
jwplayer("test").setup({
file:"<?php echo htmlentities($_GET['file']); ?>",
hieght:360,
modes:[
{ type:'html5' }
]
});

Related

Wistia Javascript API - set video foam true and hide social buttons

Here is my code,
<div id="wistia_bqur1fvyag" class="wistia_embed" style="width:420px;height:234px;"> </div>
<script charset="ISO-8859-1" src="//fast.wistia.net/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("bqur1fvyag", {
plugin: {
"socialbar-v1": {
buttons: "",
videoFoam: true
}
}
});
</script>
When i run this code, it shows black bar on left and right side.
I put videoFoam: true but, it didn't work.
Can anyone help me to remove black bar, still am i right? or can i use different api?
Thanks in advance.
I did it via the embed code directly, from the page linked below, using the two parameters to disable the social bar and enable videoFoam.
http://wistia.com/doc/iframe-embed-options
?videoFoam=true&plugin%5Bsocialbar-v1%5D%5Bon%5D=false
For what you have above, videoFoam is not part of the plugin but a standard parameter, so I'd try the following:
wistiaEmbed = Wistia.embed("bqur1fvyag", {
videoFoam: true,
plugin: {
"socialbar-v1": {
on: false
}
}
});

Multiple YouTube video embedded autoplay sequence

Hi there fellow SO users, I have started to develop a music archive site where users can share YouTube video's (Limited to music only).
I would like to incorporate a system which allows a list of these videos to be played automatically when the previous has finished.
The following code can be used to auto play a set array of videos, which will use one player rather than a list of them. In pseudo terms, the system I would like to create would be laid out in the following manner;
Player 1, Video 1
Player 2, Video 2
Player 3, Video 3
Player 4, Video 4
<div id="player1"></div>
<div id="player2"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '350',
width: '425',
videoId: 'uO7kCUjUaUE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '350',
width: '425',
videoId: 'Bt9tTEZjYG8'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player2.playVideo();
}
}
</script>
An existing topic: http://goo.gl/5neM6Z touches on this question (script source), however extended ideas from the OP are not answered. Including the idea that when one video is played, all others are paused.
My questions are, would there be a simple way of modifying this code to achieve this or will a new script have to be written? Does this system exist elsewhere? Could JWPlayer be the solution?
Discussion and advice on this topic will be greatly appreciated!
Here is another example that does more of what you want:
<!DOCTYPE html>
<html>
<head>
<title>4 Videos</title>
</head>
<body>
<script src="http://p.jwpcdn.com/6/11/jwplayer.js" type="text/javascript"></script>
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<div id="player4"></div>
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
file: "http://www.youtube.com/watch?v=xSE9Qk9wkig"
});
jwplayer("player2").setup({
file: "https://www.youtube.com/watch?v=NKPiIoLNMpA"
});
jwplayer("player3").setup({
file: "https://www.youtube.com/watch?v=hS5CfP8n_js"
});
jwplayer("player4").setup({
file: "https://www.youtube.com/watch?v=MZoO8QVMxkk"
});
jwplayer("player1").onComplete(function(){
jwplayer("player2").play();
});
jwplayer("player2").onComplete(function(){
jwplayer("player3").play();
});
jwplayer("player3").onComplete(function(){
jwplayer("player4").play();
});
jwplayer("player4").onComplete(function(){
jwplayer("player1").play();
});
jwplayer("player1").onPlay(function(){
jwplayer("player2").stop();
jwplayer("player3").stop();
jwplayer("player4").stop();
});
jwplayer("player2").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player3").stop();
jwplayer("player4").stop();
});
jwplayer("player3").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player2").stop();
jwplayer("player4").stop();
});
jwplayer("player4").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player2").stop();
jwplayer("player3").stop();
});
</script>
</body>
</html>
or
jwplayer("player1").onComplete(function(){
jwplayer("player2").play();
jwplayer("player1").stop();
});
etc.
In the JW Player, the default behavior for a playlist is to play each item automatically.
Would this possibly do what you want?
<!DOCTYPE html>
<html>
<head>
<title>4 Videos</title>
</head>
<body>
<script src="http://p.jwpcdn.com/6/11/jwplayer.js" type="text/javascript"></script>
<div id="player1"></div>
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
playlist: [{
file: "http://www.youtube.com/watch?v=xSE9Qk9wkig"
},{
file: "https://www.youtube.com/watch?v=NKPiIoLNMpA"
},{
file: "https://www.youtube.com/watch?v=hS5CfP8n_js"
},{
file: "https://www.youtube.com/watch?v=MZoO8QVMxkk"
}
],
primary: "flash"
});
</script>
</body>
</html>

Dailymotion video autoplay and muted

I am currently working on a project where i need to display a Dailymotion video that is automatically launched in muted mode. According to the documentation - http://www.dailymotion.com/doc/api/sdk-javascript.html - the DM.player is able to manipulate the volume of a video (method: setMuted(muted)). However, after many changes in my code, i cannot figure out how this works.
Have you ever done this before ? Could you provide some help please ?
Thanks
Here is my code:
<html>
<head>
<script src="http://api.dmcdn.net/all.js"></script>
</head>
<body>
<div id="myPlayer"></div>
<script>
// This function init the player once the SDK is loaded
window.dmAsyncInit = function() {
// PARAMS is a javascript object containing parameters to pass to the player if any (eg: {autoplay: 1})
var player = DM.player("myPlayer", {video: "xz0ytt", width: "480", height: "270"});
// 4. We can attach some events on the player (using standard DOM events)
player.addEventListener("apiready", function(e) {
// alert(e.target.muted);
// e.target.muted = true;
// alert(e.target.muted);
// e.target.play();
// player.setMuted(1);
player.setMuted("1");
e.target.play();
});
};
</script>
</body>
</html>
The method you are trying to use can only work after the video is playing. Hence, you have to listen to the event "play" to mute the video.
try the following:
player.addEventListener("apiready", function(e) {
e.target.play();
});
player.addEventListener('play', function(e){
e.target.setMuted(1);
});
the advertisement (if any) at the beginning can't be muted though,

how to stop video playing when using slider?

APPLICATION
Above I have an application which contains videos in a slider. There are 2 videos in the slider. Please pla the first video and then without stopping the video, click on "Next" in the slider to slide to the next video and play that video. You can tell that both videos are playing at the same time.
My question is that is it possible to stop a video playing when it has been slided?
I am using jwplayer for playing video and basic jquery slider for slider.
Code is below:
<div id="banner-video_<?php echo $key; ?>">
<ul class="bjqs">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>
<li><div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>",
width: 480,
height: 270
});
<?php $i++; ?>
</script>
</div>
</li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-video_<?php echo $key; ?>').bjqs({
animtype : 'slide',
height : 300,
width : 700,
responsive : true,
randomstart : false,
automatic : false
});
});
</script>
<?php
}
//end:procedure video
?>
you should add the command to pause in the source of the bjqs, try using the not minified version it will be easier to modify and when you are happy with it you can minify it again.
so in bjqs on line 422 you will find
$c_wrapper.on('click','a',function(e){
e.preventDefault();
var direction = $(this).attr('data-direction');
if(!state.animating){
if(direction === vars.fwd){
go(vars.fwd,false);
}
if(direction === vars.prev){
go(vars.prev,false);
}
}
});
add the command to pause all players when a link is clicked like this (using code from your example) :
$c_wrapper.on('click','a',function(e){
e.preventDefault();
jwplayer("myElement-70-0").pause();
jwplayer("myElement-70-1").pause();
var direction = $(this).attr('data-direction');
if(!state.animating){
if(direction === vars.fwd){
go(vars.fwd,false);
}
if(direction === vars.prev){
go(vars.prev,false);
}
}
});
if you want to make it dynamic you can loop through the elements of the slider..as long as you use a rule for naming the video elements, something like this
$('li.bjqs-slide').each( function(index) {
jwplayer("myElement-70-"+index).pause();
});
if you want to have slides that don't contain videos, just add a class to the jwplayer element and use each to that, so let's say all your jwplayer elements have the class .playjw, you would do something like
$('.playjw').each( function(index) {
jwplayer("myElement-70-"+index).pause();
});
hope it helps!
The JQuery plugin "basic-jquery-slider" doesn't have events notification when the navigation texts "perv" and "next" are clicked, but you can hooked them using the data-direction attribute.
According to the JwPlayer documentation, you can drive your video like using jwplayer()
The API describes all possibilities
$('[data-direction="forward"]').click(function(){
jwplayer().pause();
});
$('[data-direction="previous"]').click(function(){
jwplayer().pause();
});
I test to pause the video using console and it works. Bind the click event to the button should work too.
When the slide animation is triggered you need to call jwplayer('player').pause(); or jwplayer('player').stop();.

Can i have a flash movie communicate with Shadowbox jquery overlay?

I want to have my overlay adjust in size depending on how much content is being shown in the flash movie. Also, I want it to resize in real time when the user adjusts the content.
Is it possible?
Sure, Flash can call methods in Javascript using ExternalInterface. The syntax is pretty simple, say in Javasacript you have:
function methodInJS(name) {
alert("Hello to " + name);
return 17;
}
Then in Actionscript you would call:
var myName:String = "David";
var result:Number = ExternalInterface.call("methodInJS", myName);
trace("Result from JS call is: "+result);
Yes, use ExternalInterface
In you HTML set up your shadow box like this:
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
function openShadowbox(content, type){
Shadowbox.open({
content: content,
player: type,
title: "Welcome",
height: 350,
width: 350
});
};
</script>
Then in your ActionScript:
if(ExternalInterface.avilable){
try{
ExternalInterface.call("openShadowbox", "<h1>Welcome to my website!</h1>", "html");
}catch(error:Error){
trace(error);
}
}

Categories

Resources