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.
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.
The problem is that, when I close the popup without pausing the video, the audio keeps playing. I cannot pause the video while closing the popup. The complete code is give below.
//html code
<style>
.yourModalClass {
padding: 0 1.5em 1em;
border-radius: 5px;
max-width: 380px;
color:#fff;
}
.yourModalClass a {
color:#fff;
}
</style>
abc
<div id="yourModalId" class="yourModalClass" style="display:none; margin-left: -20%; margin-right: 20%">
<h2>abc</h2>
<video width="600" height="400" controls="">
<source src="abc.mp4" type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
<script>
$('#yourModalId').modality({
effect: 'slide-up'
});
</script>
//javascript
/* #author: Himanshu Kandpal (cse10324.sbit#gmail.com)*/
;(function(e,t,n,r){var i="modality",s=e("body")[0],o= {autoBind:true,clickOffToClose:true,closeOnEscape:true,effect:"",innerClass:"mm-wrap",modalClass:"modality-modal",onClose:"",onOpen:"",openClass:"mm-show",openOnLoad:false,userClass:""},u=function(t,n){var r=this;r.defaults=o;r.id=e(t).attr("id");r.settings=e.extend({},o,n);r.$modal=e(t).wrap('<div class="'+r.settings.modalClass+" "+r.settings.effect+" "+r.settings.userClass+'">'+'<div class="'+r.settings.innerClass+'">'+"</div>"+"</div>").show();r.$wrapper=r.$modal.parents("."+r.settings.modalClass);r.$triggers=e('a[href="#'+r.id+'"], [data-modality="#'+r.id+'"]');if(r.settings.autoBind){r.$triggers.each(function(){r.setTrigger(e(this))})}if(r.settings.clickOffToClose){r.$wrapper.click(function(e){e.preventDefault();if(e.target==r.$wrapper[0])r.close()})}if(r.settings.closeOnEscape){e(s).keyup(function(e){if(e.keyCode==27)r.close()})}if(navigator.appVersion.indexOf("MSIE 7.")!=-1){r.$wrapper.prepend('<div class="mm-ghost"></div>')}if(r.settings.openOnLoad)r.open();return r};e.extend(u.prototype,{open:function(e){this.$wrapper.add(s).addClass(this.settings.openClass);if(typeof this.settings.onOpen=="function")this.settings.onOpen();if(typeof e=="function")e();return this},close:function(e){this.$wrapper.add(s).removeClass(this.settings.openClass);if(typeof this.settings.onClose=="function")this.settings.onClose();if(typeof e=="function")e();return this},toggle:function(e){return this.isOpen()?this.close(e):this.open(e)},isOpen:function(){return this.$wrapper.hasClass(this.settings.openClass)},setTrigger:function(e){var t=this;e.click(function(e){e.preventDefault();t.toggle()});return t}});e.extend(u,{instances:{},init:function(e,t){var n={},i=this,s=0;e.each(function(){var e=new i(this,t);i.instances[e.id]=n[s]=e});return n[1]===r?n[0]:n}});e[i]=u;e.fn[i]=function(t){return e[i].init(this,t)}})(jQuery,window,document);
add id to the video controler element
call after slide up
$('#videoID')[0].pause();
$("#videoID")[0] will return you the DOM element not the jQuery object as the pause method is not the jquery method its the DOM method
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
I have this Jquery popup where I store an iframe with a youtube video. When I click the link, the popup opens and the User can click on the video and play it. Even though, when I click outside the popup, the popup closes, but the video/sound keeps playing! How can I avoid this?
Here's my HTML
CLICK
<div class="bg" style="display:none"></div>
<div class="popup" style="display:none">
<iframe width="480" height="360" src="//www.youtube.com/embed/Q_WHGV5bejk" frameborder="0" allowfullscreen></iframe>
</div>
my JS:
$(function(){
$("#showPopup").click(function(e){
e.stopPropagation();
$(".bg").toggle();
$(".popup").toggle();
});
$("body").click(function(){
$(".bg").toggle();
$(".popup").hide();
});
});
And the CSS:
.popup{
background-color:#E6E9F2;
position:absolute;
min-height:auto;
width:auto;
border: solid 2px #B9EAF0;
z-index: 1002;
}
.bg {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 1000;
top:0px;
left:0px;
width:100%;
min-height:100%;
overflow:auto;
}
I alos created a Fiddle http://jsfiddle.net/nLBZa/6/
so, does anyone have a suggestion?
thanks in advance...
Try adding the following into your Jquery
$('#playerID').get(0).stopVideo();
EDIT:
OK, so I thought that would work according to the API, anyways... Here is another solution:
var video = $("#player").attr("src");
$("#player").attr("src","");
$("#player").attr("src",video);
and your fiddle updated.
Assume, I have several different YT videos embedded in CSS only modals, like this:
<div id="video1" class="modalDialog">
<div>
X
<div id="video1_content"><iframe width="420" class="yvideo" id="video1_iframe" height="315" src="https://www.youtube.com/embed/_Qc4V_vEXdY?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
</div>
I can dynamically unload (and therefor stop playing) a single video like so:
$('.videoclose').click(function( e ){
var contentdiv = $(this).next('div');
var iframe = $(contentdiv).find('iframe:first');
var video = $(iframe).attr("src");
$(iframe).attr("src","");
$(iframe).attr("src",video);
});
Thanks to Mike for the ignition ;-)
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.