i am playing audio file through the code below in a jQuery Dialog through Quicktime.
Everything is working fine but what i want to do is when i close the Dialog i want the audio file to stop too. in real its keep playing.
Code:
//Listen Music
$('.listenMusic').live('click', function(){
if($('div.ui-dialog').length){
$('div.ui-dialog').remove();
}
var path = $(this).attr('rel');
var $dialog = $('<div>', {
title: Listen
}).dialog({
autoOpen: false,
modal: true,
width: 400,
height: 100
});
var tab = '<table width="90%" style="margin: 10px 10%;"><tr><td><object codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><param value="'+path+'" name="SRC"><param value="true" name="AUTOPLAY"><param value="true" name="CONTROLLER"><embed pluginspage="http://www.apple.com/quicktime/download/" controller="true" style="height:20px;width:300px;background-color:#D9EBFB" autoplay="true" target="myself" src="'+path+'"></object></td></tr></table>';
$('<div id="updateContent">').html(tab).appendTo($dialog);
$dialog.dialog('open');
return false;
});
this is the tag i used in above code
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><param value="'+path+'"
name="SRC"><param value="true" name="AUTOPLAY"><param value="true"
name="CONTROLLER"><embed pluginspage="http://www.apple.com/quicktime/download/"
controller="true" style="height:20px;width:300px;background-color:#D9EBFB"
autoplay="true" target="myself" src="'+path+'"></object>
why dont you just do this
Give "id" to your table
'<table id="myPlayer" width="90%" style="margin: 10px 10%;">
capture jquery Dialog close icon(*) event
$('div.ui-dialog').live("dialogclose", function(){
if($("#myPlayer").length){
$("#myPlayer").remove();
}
}):
This will remove it from dom which means your audio file is no longer exists so it will stop playing.
Related
Whenever I clicked full screen for my youtube embedded video on mobile with portrait mode it moves to landscape fullscreen mode and come back to original position.
I have implemented it using iframe API. (the contents here will load dynamically)
<div class="card-media-wrap">
<div style="position: absolute; top: 0px; background-image: url("http://localhost/hellou_clone/thehooknew/wp-content/uploads/2017/05/islafisher-baroncohen.jpg");"></div>
<a tabindex="0">
<img src="loading_ring.svg" width="100%" id="load-hilary-122014" class="loading_ring" style="display: none;">
<span class="play_button_span" id="play_button-hilary-122014" style="display: block;"></span> 8
</a>
<iframe id="hilary-122014" src="https://www.youtube.com/embed/9IL9Omfh0hU?&rel=0&enablejsapi=1" style="background-size: cover;margin: 0; opacity: 0;" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
</div>
Try this code from codepen. Fullscreen works on portrait mode and doesn't exit automatically.
// init player
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '300',
videoId: 'dQw4w9WgXcQ',
events: {
'onReady': onPlayerReady
}
});
}
// when ready, wait for clicks
function onPlayerReady(event) {
var player = event.target;
iframe = $('#player');
setupListener();
}
function setupListener (){
$('button').addEventListener('click', playFullscreen);
}
function playFullscreen (){
player.playVideo();//won't work on mobile
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(iframe)();
}
}
So I added the youtube iframe api to my website and followed the instructions; so this is my code:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
controls: '0',
autohide: '1',
videoId: 'I'd rather not display that',
events: {
// 'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Setting controls to 0 should not display the player's controls as per this article but it's still showing;
Also setting the autohide to 1 should have the progress bar and controls slide out after a couple of seconds as per this article but that also doesn't work.
Am I doing something wrong?
I got the embed version and the iframe version both autoplaying, autohide (don't really need) and hiding controls. I used the sample code and added in the parameters you needed.
All you need to do is replace your movie id and I think you will be up and running.
Here is the jsfiddle links where you can see it work and grab the code.
Embeded version: http://jsfiddle.net/franktudor/jk9SS/
<object width="640" height="390">
<param name="movie"
value="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="640" height="390"></embed>
</object>
Here is the iFrame version: http://jsfiddle.net/franktudor/2wh8T/
<iframe id="ytplayer"
type="text/html"
width="640"
height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&autohide=1&controls=0"
frameborder="0"/>
Both are options you can use. You are working with the iFrame version...I also recommend that version. But in the event you need another solution the embed version can be used.
Its not that script style but you can use a wrapper if needed.
Here is a link to an HTML5 youtube (and vimeo) video wrapper.
Ok, here is the functional code like your example that I got working: http://jsfiddle.net/franktudor/DU57E/
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://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;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 }, //this is what you need...
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
Just set the variables inside the propertie 'playerVars'.
Context
I have a page which contains a bunch of links to jQuery UI Dialog boxes which then have video.js players within them.
Problem
When you click one of these links the first time, everything works perfectly.
It's when you click subsequent times that you run into issues. I've fixed the issue with opening up a second different video by making all of the ids unique.
However, it seems this doesn't help opening the same video a second time; so I even made those player's ids unique (see below the id propery for <video> containing both the hash of the video as well as a rand.
Defined Issue
What I see is happening is that once you close the dialog box the browser is continuing to download the video source. This means that subsequent dialog openings create more videos downloading and so on.
Questions
How can I stop the video from downloading?
Is there a better way of re-initiliazing than what I'm doing.
Is there a better way of killing off the videos when someone hits the close button?
Code
The jQuery UI Dialog window is loaded with the following HTML
<video id="<?php echo $viLibraryItem->getHash().rand() ?>" class="video-js vjs-default-skin" width="320" height="240"
controls="controls" preload="auto" data-setup="{}"
poster="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>">
<source src="<?php echo $viLibraryItem->getFullWebPath() ?>" type="video/mp4"></source>
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
data="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>">
<param name="movie" value="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["<?php echo viLibraryItem::getWebPath() ?>/<?php echo $viLibraryItem->getFilename() ?>", {"url": "<?php echo _compute_public_path($viLibraryItem->getFilename(), viLibraryItem::getWebPath(), 'swf')?>","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>" width="320" height="240" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
Javascript For the Dialog Box
video_play_click_event: function(event) {
$.loading();
$('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
$.loading();
$this = $(this);
$this.dialog({
width: 320,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog( "destroy" );
},
},
open: function(event, ui) {
id = $(this).find('.video-js:first').attr('id');
_V_(id);
$(this).css({overflow: 'hidden', padding: '0'});
},
beforeClose: function() {
$('.video-js').player().pause();
$('.video-js').remove();
}
});
});
return false;
}
I don't know if this is the correct answer to solve this; however, I ended up changing my javascript to look like the following.
The secret was setting src="" to get the browser to stop buffering. This throws a video error on the console which I really don't like; but for now it works.
video_play_click_event: function(event) {
$.loading();
$('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
$.loading();
$this = $(this);
$this.dialog({
width: 320,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
},
},
open: function(event, ui) {
id = $(this).find('.video-js:first').attr('id');
_V_(id);
$(this).css({overflow: 'hidden', padding: '0'});
},
beforeClose: function() {
$('.video-js').player().pause();
$('.video-js video').attr('src', '');
$('.video-js').remove();
}
});
});
return false;
}
I have many videos in a given page and I was facing the same issue. But the below approach worked well for me.
NOTE: Change the MYID for each video in the page.
jQuery(document).ready(function(){
jQuery("a#videolink").fancybox({
frameWidth: 800,
frameHeight: 450,
overlayShow: true,
overlayOpacity: 0.7
});
});
<a id="videolink" href="#MYID" title="Test Video">
<img src="mp4test.jpg" width="248" height="145" />
</a>
<div style="display:none">
<video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin"
controls preload="auto" width="300" height="300" data-setup="{}" >
<source src="mp4test.mp4" type='video/mp4'>
</video>
</div>
If you are calling a modal dialog box in jquery, but have the image file location in an array, how would you call this dialog box where if they clicked the link, the image would pop up? Right now, because of a loop it is obviously only using the last file name.
function showDialog(){
$("#image_viewer").html('<iframe id="modalIframeId" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" />').dialog("open");
$("#modalIframeId").attr("src","image_view.cfm");
return false;
}
$(document).ready(function() {
$("#image_viewer").dialog({
autoOpen: false,
modal: true,
height: 800,
width: 600
});
});
You're trying to use an iframe as a modal dialog, you should just use a DIV.
<!--- HTML --->
<div id="imageDialog" class="dialog" style="display:none;"></div>
Then you can output a list of links to your images like this:
<!--- CFML --->
<cfoutput query="qImages">
#qImages.label#<br />
</cfoutput>
Finally, you can open the URL for the image directly into the modal dialog using a bit of class trickery.
<!--- jQuery --->
$(document).ready(function(){
$('.dialog').dialog(
{
autoOpen: false,
modal: true,
width: 440,
height: 330,
title: "Image Viewer"
}
);
$('a.image').click(function(e){
$('#imageDialog').load( $(this).attr('href') ).dialog("open");
e.preventDefault();
});
});
I have 2 div one to load data from an ajax request and another to display Jquery dialog with gif image which says loading.
The jquery dialog is displayed when the page is requested while the ajax function gets the data from the controller. I want to close the dialog when the ajax function completes the request but not sure hot to do it.
here is the code
Page
<style>
.ui-dialog-titlebar-close{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//define config object
var dialogOpts = {
title:"Retreving Donation Details",
modal: true,
autoOpen: true,
height: 200,
width: 250,
closeOnEscape: false,
resizable: false,
};
$("#ajaxload").dialog(dialogOpts); //end dialog
$("#ajaxload").dialog("open");
});
</script>
//jquery dialog
<div id = "ajaxload" style ="display:none; background-color:Green; text-align:center;">
<br />
<img alt="loader" src = "../../Content/loader.gif" id = "loader" height="100" width ="100" style = "margin:auto; text-align:center; vertical-align:middle;" />
</div>
//Div to load data
<div id="dataload"><div>
Thanks in advance
You can close it when the ajax requests stop using the ajaxStop event, like this:
$(document).ajaxStop(function() {
$("#ajaxload").dialog("close");
});
When all concurrent jQuery AJAX requests finish, this event fires, and you can hide the dialog then. Another (same effect) format is to bind the event directly, like this:
$("#ajaxload").ajaxStop(function() {
$(this).dialog("close");
});