I have multiple embed videos from different sites (Youtube,Vimeo, Dailymotion etc..) on a single page. I would like to give the user a central control panel similar to any desktop media player with pause, play, next video, prev video and volume control.
How can i achieve this ? Is it even possible ? I know Youtube has an api but what about other websites ? Is there a common API for all of them ?
Thanks
http://jsfiddle.net/sumanP/rzeb23aq/1/
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player1st;
var player2nd;
function onYouTubePlayerAPIReady() {
player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}});
player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
}
//function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }
function onPlayerStateChange(event) {
alert(event.target.getPlayerState());
}
</script>
<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&enablejsapi=1"></iframe><br>
play1st<br>
pause1st<br>
stop1st
<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&enablejsapi=1"></iframe><br>
play2nd<br>
pause2nd<br>
stop2nd
Related
In a single html page there are multiple video tags and all these videos may be played simultaneously. I have build an application where I am capturing video using webrtc and video capture device. These video are not seekable.
So I am calling below code for each of those video tag so that video which are playing can be seekable.
This code works fine if I apply to only one tag but when I apply it for multiple video tag it wont work.
$scope.addListenerVideo = function(videoSrc) {
var videoSrcVar = document.getElementById(videoSrc);
if(videoSrcVar !=null) {
videoSrcVar.addEventListener('loadedmetadata', () => {
if (videoSrcVar !=null && videoSrcVar.duration === Infinity) {
videoSrcVar.currentTime = 1e101;
videoSrcVar.ontimeupdate = function() {
videoSrcVar.currentTime = 0;
videoSrcVar.ontimeupdate = function() {
delete videoSrcVar.ontimeupdate;
};
};
}
});
}
}
html code sample:
<div class="row">
<div class="first-column">
<video width="636" height="380" controls preload="auto" ng-show="actStatus_1" id="demoVideoSrc1" style="border: 1px solid black; margin-top: 10px; margin-left: 10px; "></video>
</div>
<div class="second-column">
<video width="600" height="380" controls preload="auto" ng-show="actStatus_2" id="demoVideoSrc2" style="border: 1px solid black; margin-top: 10px; margin-left: 149px;"></video>
</div>
</div>
Here I switched to mozilla firefox. There is issue with the way video capture in chrome which is not allowing video to be seekable. I don't know whether I was missing something or not. Once I switched to Firefox browser there was no issue with seeking video.
I have created an html5 banners and validated it here:
https://h5validator.appspot.com/dcm.
It returns the error: "Missing click tag check".
How do I implement a clickTag? I've found this code on google support:
<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com";
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>
</body>
</html>
But isn't the destination URL of the banner set after uploading the ZIP file in DoubleClick?
Do I have to set the destination URL hardcoded in the HTML? Doesn't make any sense to me..
I have made a lot of flash banners in the past and there you only referred to a variable _root.clickTag.
Can anyone help me out?
Thanks
In order to create a doubleclick studio banner you need to import doubleclick studio library and initialize enabler. Then set Exit_url. Save yourself all the trouble create the Banner in Google Web Designer its easy and will upload directly to DC studio
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<style>html, body {width: 100%; height: 100%}
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 381px; //banner height
left: 0px;
position: absolute;
top: 19px;
width: 400px; //banner width
z-index: 1;
}</style>
<div id="bg-exit"></div> <!-- put this div inside your main container of banner -->
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
Using this code you can change the exit_url from DC studio Dynamically
I have embedded a youtube video on my site, and want to remove all play/pause functionality form it. I have already made it so that the controls are not visible; however, the video still pauses when the user clicks on the video.
I'm using a youtube "player" and div to embed it:
<div id="player" style="position: absolute; width:100%; height: 100%;" frameborder="0"> </div>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: 'Ir8-0xOptFA',
playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo' : 0, 'wmode' : 'transparent', 'modestbranding': 1},
events: {
'onReady': onPlayerReady,
},
version: 3
});
}
</script>
The idea is that this video will serve as the 'background' for the main page of the site. Any insights would be much appreciated!
Have you thought about overlaying a transparent DIV?
Your question may have already been answered here?
Look into THIS link
And THIS link.
You may have to load the preview image in place of the button. Not sure if that will help
I am developing a web application where I have a youtube video player embedded in one of my web pages. I am trying to present extra information on top of the playing video (on full screen). By extra information I mean a message with some text or maybe an image.
The code for the embedded player is similar to this:
<div id="player" align="center"></div>
<noscript>This feature requires Javascript, please turn it on</noscript>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
var uid;
var firstStatus = 1;
var firstTimeStamp = 0;
// Current state of the player
var state = -1;
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var show = getVarsFromUrl()['showId'];
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: show,//'a8u_a9q978M',//'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
I intend to present the extra information on top of a playing video.
I hope I was clear enough. Thanks!
Extra code:
The style (CSS):
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
background-color: #222222;
color: #C0C0C0;
}
img {
position:relative;
left:500px;
top:500px;
z-index:5;
}
iframe {
position:absolute;
left:500px;
top:500px;
z-index:-1;
}
</style>
And the image:
<img src="smiley.png" alt="Smiley face" height="42" width="42">
Add ?wmode=opaque to the end of the url to enable the use of z-index. Then use z-index in your CSS to layer your styles accordingly.
I've tried various things but can't get a YouTube video in a hidden DIV to stop playing in the background before the DIV toggle is even clicked. visibility:hidden didn't seem to solve the issue. Here's the code I'm using. Hope someone can help! I can turn off autoplay to solve it, but then it means users have to click an extra button (the YouTube 'play' button) which isn't ideal.
** IN THE OF THE WEB PAGE:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".productDescription").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});
});
</script>
** IN THE BODY:
<div class="productDescription">
<iframe width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&wmode=transparent&autoplay=0" frameborder="0" allowfullscreen></iframe>
<div class="closebutton">Close Video
</div>
</div>
** AND IN THE STYLESHEET:
.productDescription {
display: block;
position:absolute;
left:0px;
top:-2px;
z-index:5;
background-color: #000;
margin: 0px;
float: left;
padding: 0px;
width: 715px;
min-height: 600px;
height: 600px;
}
.show_hide {
display:none;
}
.closebutton {
display: block;
width:120px;
height: 22px;
position:absolute;
left:20px;
top:50px;
background-color: #000;
padding-top: 3px;
float: left;
z-index: 9999;
}
Thanks very much in advance!
The autoplay feature will start to play the video once it is loaded, whether the div is visible or hidden.
However, if you remove the autoplay setting, you can then use a YouTube API to control the video so that the video will start playing when a person clicks to show the div. One option is the iframe API (which I would recommend since you are already using iframe to embed the video, and this allows YouTube to serve up an HTML5 video rather than a flash video if the viewer is on a mobile device) and another option is the JavaScript API.
Because you asked for more details, here is a quick explanation of how to use the YouTube iFrame API to meet your needs. I recommend reading the documentation so you can understand what is going on and adapt it as needed.
First, in your HTML create your iframe video the same way you did above, but add two things: an ID for the iframe and an origin parameter in the iframe src. (The origin parameter helps keep you YouTube player safe from javascript hacking.) So it would look like this:
<iframe id="player" width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&wmode=transparent&autoplay=0&origin=http://example.com/" frameborder="0" allowfullscreen></iframe>
Replace the example.com url with the website this page will be on.
Somewhere after the iframe, but before the </body> tag, add this code to load the api and initialize the player:
<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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player');
}
</script>
Then, in your javascript, just before the line that reads $('.productDescription').slideToggle(), add this code:
if ($('.productDescription').is(':visible')) {
player.pauseVideo();
}
else {
player.playVideo();
}
This code will test to see whether the .productDescription div is visible. If it is hidden, it will start the video and display the div. If it is not visible, it will pause the video and hide the div.
That should do it.
I have same issue, but I could fix with this.Refer to YouTubeAPI,we can't implement directly.So I edit this way.
Step1: Creat loadYTScript() function and put youtubeAPI code,
Step2: is call function onYouTubeIframeAPIReady()
Then at onclick call the load function.
Here is your js code:
function loadYTScript(){
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
jQuery(document).ready(function() {
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
loadYTScript();
});
});
At html don't forget to add
<div class="productDescription">
<div id="player"></div>
</div>
Hope it work well.