How can I stop or pause a YouTube Video from playing when I go to another page
In Sencha Touch2 Here is my code it seems like it should work but Video still plays.
Ext.define('MyApp.view.tablet.Home5', {
extend: 'Ext.Panel',
xtype: 'home5',
config: {
scrollable: true,
cls:'logo',
items:[
{
xtype: 'panel',
id: 'videopanel',
html:[
'<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc?fs=1&hl=en_US&rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div>',
'<img src="resources/images/thapelo3Fy.jpg" />'
].join("")
}
]
},
hide: function(container, options){
this.callParent(arguments);
//workaround to stop the video (= reset the html)
Ext.getCmp('videopanel').setHtml("");
Ext.getCmp('videopanel').setHtml('<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc?fs=1&hl=en_US&rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div><img src="resources/images/thapelo3Fy.jpg" />');
}
});
How can I stop a video with Javascript in Youtube? is what you need to do. Would have typed it here, but on my mobile...
Related
I'm trying to stop emebed youtube video when another one is played on the same page, I found this:
stackoverflow
fiddle-example
But when i try to use it on my web page it doesn't work:
my_test
SCRIPT
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var $ = jQuery;
var players = [];
$('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
if (!this.id) { this.id='embeddedvideoiframe' + k }
players.push(new YT.Player(this.id, {
events: {
'onStateChange': function(event) {
if (event.data == YT.PlayerState.PLAYING) {
$.each(players, function(k, v) {
if (this.getIframe().id != event.target.getIframe().id) {
this.pauseVideo();
}
});
}
}
}
}))
});
}
</script>
HTML
One:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed /zXV8GMSc5Vg?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net"> </iframe>
<br/>
Two:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net"> </iframe>
What's wrong? I've created the project on google developers, i've created the API key but i don't know where i must put that.
You forgot to add the jquery lib ( https://code.jquery.com/ )
SOLVED
The problem was that in the example they used the "origin" parameter, this parameter if setted avoids the introduction into the page of malicious third-party JavaScript code, which can take control of the YouTube player.
src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net"
This is why the code work on the fiddle page but not on mine.
So i've changed this origin path with my complete URL of the host page and now it work!
I'm developing a simple web application with jQueryMobile, I can swipe between different pages with Youtube videos,
the problem I have is quite simple, I want to stop a youtube video whine I swipe go to the next page,
otherwise the user will have two youtube videos playing in the same time.
here is the Code and the demo :
JSFiddle DEMO + FULL CODE
Here is my awesome full code :
var i =1;
$("body").on("swipeleft",function(){
if (i<2) {
i++;
$.mobile.changePage('#p'+i, {
transition: "slide"
});
}
});
$("body").on("swiperight",function(){
if (i>1) {
i--;
$.mobile.changePage('#p'+i, {
transition: "slide",
reverse: true
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div data-role="page" id="p1">
<iframe width="560" height="315" src="https://www.youtube.com/embed/X9_n8jakvWU" frameborder="0" allowfullscreen></iframe>
</div>
<div data-role="page" id="p2">
<iframe width="560" height="315" src="https://www.youtube.com/embed/UecPqm2Dbes" frameborder="0" allowfullscreen></iframe>
</div>
Given the older version of jQuery you are using, I assume you are using jQuery Mobile 1.3 not 1.4.
You could use the pagebeforehide event to get the iframe of the page you are leaving and then quickly set the src of the iframe to nothing and then back to the video url. This will stop the video from playing.
var TheFrame;
$(document).on( "pagebeforehide", function( event, data ) {
TheFrame = $(event.target).find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}
The setTimeout allows the slide transition to complete before messing with the iframe src.
Working DEMO
If you are using jQM 1.4, you can use the pagecontainer widget events instead:
var TheFrame;
$(document).on( "pagecontainerbeforehide", function( event, ui ) {
TheFrame = ui.prevPage.find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}
I have a page that has multiple youtube videos. I want the video to play when someone clicks on the link that corresponds to each video.
For Example: When someone clicks on the video 2 link, video 2 plays.
HTML
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0"></iframe>
Video 1
<br><hr>
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer2" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
frameborder="0"></iframe>
Video 2
JQUERY
var ytplayer;
function onYouTubeIframeAPIReady() {
ytplayer = new YT.Player('ytplayer', {
});
}
$(document).ready(function () {
$("#start").click(function () {
ytplayer.playVideo();
});
});
HERE IS MY JSFIDDLE Only clicking on video 1 works.
Here is a demo that works as you expected.
I have removed the second script tag and modified the ids of the second iframe and a tags.
var ytplayer, ytplayer2;
function onYouTubeIframeAPIReady() {
ytplayer = new YT.Player('ytplayer', {});
ytplayer2 = new YT.Player('ytplayer2', {});
}
$(document).ready(function () {
$("#start").click(function () {
ytplayer.playVideo();
return false;
});
$("#start2").click(function () {
ytplayer2.playVideo();
return false;
});
});
The html part:
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0"></iframe>
Video 1
<br><hr>
<iframe id="ytplayer2" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
frameborder="0"></iframe>
Video 2
Hope this helps.
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>
I can't seem to get Vimeo or Youtube videos that are embedded with HTML5 embed code to play on the Blackberry 6 devices. The video just sits there, with the spinner spinning. Checked with multiple Blackberries, all of which work fine on Vimeo's website and Youtube's website, and other website embedding said content.
Sample code for the Youtube video below. Vimeo code is the same, with different URL.
Edit: this is through the browser, not web works.
function(options) {
var details = new Ext.Panel({
autoRender: true,
floating: true,
modal: true,
centered: true,
scroll: false,
hideOnMaskTap: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: '',
items: [{
text: 'Close',
handler: function() {
details.update('');
details.hide('pop');
}
}]
}],
listeners: {
deactivate: function (p) {
p.destroy();
}
}
}
);
details.update('<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/'+options.data.id+'?showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>');
details.show();
}
Have you granted access to the domains in your webworks configuration file like this?
<access subdomains="true" uri="http://www.youtube.com"/>
<access subdomains="true" uri="http://www.vimeo.com"/>