I need the Carousel to stop when someone click the video to play it.
As per the docs, I need to use
$('.owl-carousel').trigger('stop.owl.autoplay');
The Youtube video is embedded via iframe.
I refered: How to fire function on Embedded YouTube iFrame's end
But, it isnt working. I'm getting warning in Console that webkitURL is deprecated.
Error Log:
[Deprecation] 'webkitURL' is deprecated. Please use 'URL' instead.
(unknown) [Deprecation] 'webkitURL' is deprecated. Please use 'URL' instead.
(anonymous)
g
z.Y
n
N
d
v
z
e.zKz
e.bg
wf # www-embed-player.js:405
(anonymous) # www-embed-player.js:404
f # www-embed-player.js:377
(anonymous) # www-embed-player.js:332
Is there a different way to trigger handler on Video State changed?
Trigger to the Iframe container div works if I click in the white space to the left & right of the Youtube video:
$( ".item" ).click(function() {
//alert( "Handler for .click() called." );
$('.owl-carousel').trigger('stop.owl.autoplay');
});
But, if I use the Youtube API to trigger handler on Video Play state change, it doesnt work:
//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);
var player1;
function onYouTubePlayerAPIReady() {
player1 = new YT.Player('ytplayer', {
events: {
'onStateChange': ShowMe
}
});
}
function ShowMe() {
console.log("ShowMe triggered");
alert("ShowMe called");
var sStatus;
sStatus = player.getPlayerState();
if (sStatus == -1) alert("Video has not started.");
else if (sStatus == 0) { $('#ytplayer').replaceWith('<img class="special_hover" src="image" alt="" />')
//change above function to react to when the player stops.
}
else if (sStatus == 1) {alert("Video has started.") } //Video is playing
else if (sStatus == 2) {alert("Video has paused.")} //Video is paused
else if (sStatus == 3) { } //video is buffering
else if (sStatus == 5) { } //Video is cued.
}
Currently, I'm testing this on the first video in carousel:
<div class="owl-carousel">
<div class="item">
<iframe id="ytplayer" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>
</div>
<div class="item">
<iframe id="ytplayer1" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>
</div>
<div class="item">
<iframe id="ytplayer2" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>
</div>
<div class="item">
<iframe id="ytplayer3" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>
</div>
</div>
https://jsfiddle.net/shaileshghadge/hoe4jfcp/
Related
I have a navbar in Jquery mobile which have 5 contents, each content have a text right now. The problem is that the first time that I load the page, in the first tab all the content is loaded, and as soon as you start pressing the buttons, the content is loaded normally, as shown in the image below:
Then when I start clicking the buttons the content shows correctly:
Below is the code that I'm using:
Javascript:
<script>
(function($) {
// Before handling a page change...
$(document).bind("pagebeforechange", function(e, data)
{
// If the new page is not being loaded by URL, bail
if (typeof data.toPage !== "string")
{
return;
}
// If the new page has a corresponding navbar link, activate its content div
var url = $.mobile.path.parseUrl(data.toPage);
var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']");
if ($a.length)
{
// Suppress normal page change handling since we're handling it here for this case
e.preventDefault();
}
// If the new page has a navbar, activate the content div for its active item
else
{
$a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active");
// Allow normal page change handling to continue in this case so the new page finishes rendering
}
// Show the content div to be activated and hide other content divs for this page
var $content = $($a.attr("href"));
$content.siblings().hide();
$content.show();
});
})(jQuery);
Here is the HTML:
<body>
<div data-role="page">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</div>
<center>
<div data-role="content">
<div id="oneContent">First</div>
<div id="twoContent">Second</div>
<div id="threeContent">Third</div>
<div id="fourContent">Fourth</div>
<div id="fiveContent">Fifth</div>
</div>
</center>
</div>
</body>
How can avoid the problem of loading all content at first load?
UPDATED TO ANSWER NEW REQUEST BELOW
If you want the first tab to show up by default, set the CSS of them all individually then toggle them into view.
First put this in your <head> or in a linked CSS file:
<style>[data-role=content] > div { display: none; }</style>
Then insert these two lines into your Javascript at the beginning like so:
(function ($) {
$(document).ready(function() {
var path = (window.location.hash) ? window.location.hash : '#oneContent';
$(path).show();
});
$(document).bind("pagebeforechange", function (e, data) {
....
Here's an updated fiddle diddle skittle
I am adding a YouTube Video to my Twitter Bootstrap carousel. Problem is it moves in the middle of the video and that looks ugly so I want to stop it on the iFrame click (to play). I try adding the following...
$(function() {
$("#movie-frame").bind('click', function(event) {
$('.carousel').carousel('pause')
alert("iframe clicked");
});
});
//in jade
iframe#movie-frame(frameborder="0", height="100%", width="100%", src="url")
This of course doesn't work because iFrames don't play nice with click events. Is there another way I can go about accomplishing this?
JSFiddle example *Movie is the last entry
For YouTube videos you can use it's API and follow to Get started for it.
So the code for player will look like(it's example from links above):
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onStateChange': function (event){
switch(event.data){
}
}
}
});
}
The player can have the following states:
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).
On each state you can add your custom behaivior.
EDIT:
Example in jsFiddle
HTML:
<div class="car col-xs-12">
<div id="carousel-example-generic" data-ride="carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="NaN" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="top-bumper"></div>
<a href="#Music">
<img src="http://www.recorddept.com/wp-content/uploads/2010/01/WoodyPines%E2%80%93CountingAlligators.jpeg"><div class="carousel-caption">Music</div>
</a></div>
<div class="item active">
<div class="top-bumper"></div>
<a href="#Vinyl">
<img src="http://www.clker.com/cliparts/8/9/f/1/1317521544340515496_45_record_album-hi.png"><div class="carousel-caption">Vinyl</div>
</a></div>
<div class="item">
<div class="background" id="player">
<div class="carousel-caption">Video</div>
</div>
</div>
</div>
<span class="glyphicon glyphicon-chevron-left"></span><span class="glyphicon glyphicon-chevron-right"></span>
<div class="scroll-area"><i class="fa fa-angle-down fa-4x"></i></div>
</div>
</div>
JavaScript:
<script type="text/javascript">
// 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);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'tZ5f3IZ6xlU',
events: {
'onStateChange': onPlayerStateChange
}
});
}
var done = false;
function onPlayerStateChange(event) {
switch(event.data){
case 1:
console.log("playing");
break;
default:
console.log("otherwise");
break;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
Check this code.
function onPlayerStateChange(event) {
if(event.data== YT.PlayerState.PLAYING) {
$("#movie-frame").carousel('pause');
console.log('stop carousel');}// Stop the carousel, if video is playing
else {
$("#movie-frame").carousel('cycle');
// console.log('play carousel'); // Otherwise, start it
}
if(event.data== YT.PlayerState.ENDED) {
// player.playVideo();
$("#movie-frame").carousel('next');
}
}
Im trying to place an inner div to my resizable handle, but it renders the handle useless.
<div class="layer" style="width: 150px;">
<div class="left ui-resizable-handle ui-resizable-w">
<div><<< div</div>
</div>
<div class="right ui-resizable-handle ui-resizable-e">>>></div>
</div>
$('.layer').resizable({
handles: null
});
http://jsfiddle.net/MatteS75/3dwVp/15/
How can I make this work?
changing the _mouseCapture method in the jquery ui resizable widget to this makes it work:
_mouseCapture: function(event) {
var capture = false;
for (var i in this.handles) {
var handle = $(this.handles[i])[0];
if (handle == event.target || $.contains(handle, event.target)) {
capture = true;
}
}
return !this.options.disabled && capture;
},
I also created a ticket and pull request for this:
http://bugs.jqueryui.com/ticket/8756
I have jQuery Mobile on iPad Safari and for some reason touch swipe events are firing twice.
People have reported the same problem over the past year as recently as this week but I cannot find an explanation for how to fix the double event without modifying jQuery Mobile and I do not want to do that. Thread on jQuery forums
The follwoing element bindings for the swipe handler all have the same incorrect double-event result where the alert is called twice for every one swipe.
How should jQuery Mobile touch events be bound in order to avoid double bubbling?
// Test 1: Binding directly to document with delegate()
$(document).delegate(document, 'swipeleft swiperight', function (event) {
alert('You just ' + event.type + 'ed!');
});
// Test 2: Binding to document with on() handler recommended as of 1.7 with and without preventDefault
$(document).on('swipeleft',function(event, data){
event.preventDefault();
alert('You just ' + event.type + 'ed!');
});
// Test 3: Binding to body with on() with and without event.stopPropagation
$('body').on('swipeleft',function(event, data){
event.stopPropagation();
alert('You just ' + event.type + 'ed!');
});
// Test 4: Binding to div by class
$('.container').on('swipeleft',function(event, data){
event.stopPropagation();
alert('You just ' + event.type + 'ed!');
});
event.stopImmediatePropagation() was the trick, which is different from stopPropagation(). Ensuring the jQuery on() method is called in document.ready seems to help. I was able to use any element selector to bind the events including using the swipeup and swipe down from here
$(document).ready(function(){
$(document).on('swipeleft swiperight swipedown swipeup',function(event, data){
event.stopImmediatePropagation();
console.log('(document).Stop prop: You just ' + event.type + 'ed!');
});
});
Well, had the same problem with swipe event been called twice.
The workaround is to bind the event this way:
$(document).on('swipeleft', '#div_id', function(event){
//console.log("swipleft"+event);
// code
});
it really helped in my case too. I was trying to swipe pages with mobile jquery and swipe events( left and right ) were triggering several times. event.stopImmediatePropagation() it worked like a charm. Thank you !!
here is my code.
<script type="text/javascript">
$(document).bind( 'pageinit', function(event) {
$("div:jqmData(role='page')").live('swipeleft swiperight',function(event){
if (event.type == 'swipeleft') {
var prev = $(this).prev("div:jqmData(role='page')");
if(typeof(prev.data('url')) !='undefined') {
$.mobile.changePage(prev.data('url'), { transition: 'slide', reverse: false});
event.stopImmediatePropagation();
}
}
if (event.type == 'swiperight') {
var next = $(this).next("div:jqmData(role='page')");
if(typeof(next.data('url')) != 'undefined') {
$.mobile.changePage(next.data('url'), { transition: 'slide', reverse: false});
event.stopImmediatePropagation();
}
}
});
});
</script>
HTML -
<div data-role="page" id="page1" data-url="#page1">
<div data-role="content">
<div>
<h1> Page 1 </h1>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called</p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>Swipe Right to view Page 2</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2" data-url="#page2">
<div data-role="content">
<div>
<h1> Page 2 </h1>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called</p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>Swipe Right to view Page 3</li>
</ul>
</div>
</div>
</div>
So the issue at hand is to have a constantly moving slider in jQuery Mobile alpha 4.1 as if listening to a song or watching a show. Basically a progress bar in which the user can also enter input. Much like one on a regular mobile device's music player. Does anyone have an idea on how to do this?
Example:
(Not sure if this will work with Alpha 4.1 but might give you and idea on how to make yours work)
http://jsfiddle.net/zPVVq/
JS
$('#movingSlider').live('click', function() {
var started = false;
var speed = 1500;
var duration = new Array();
for(i = $(this).val(); i <= $(this).attr('max'); i++){
duration.push(i);
}
$.each(duration,function() {
var moveSlider = function() {
newValue = parseInt($('#movingSlider').val(), 10) + 1;
$('#movingSlider').val(newValue).delay(speed).slider('refresh');
}
setTimeout(moveSlider,0);
});
});
$('#resetSlider').click(function() {
$('#movingSlider').val(0); });
HTML
<div data-role="page" id="home">
<div data-role="content">
<label for="slider-0">Click slider value to start --></label>
<input type="range" name="slider" id="movingSlider" value="0" min="0" max="1000" />
Reset Slider
</div>
</div>