I'm using the plug in called GalleryView (http://spaceforaname.com/galleryview/) and I want to find a way to make a function to pause the gallery when I want.
I use some Ajax requests to call images from a calendar in determinates days, if a play the gallery in the day 1 and click in the day 2, the gallery don't stop.
In the js file of the plug have the code bellow that I think stops the gallery, but I don't know how do access it from my content page:
stopSlideshow: function(changeIcon) {
var self = this,
dom = this.dom;
if(changeIcon) {
dom.gv_navPlay.removeClass('gv_navPause').addClass('gv_navPlay');
}
this.playing = false;
dom.gv_galleryWrap.stopTime('slideshow_'+this.id);
},
Thanks.
Related
I have different YouTube video id's to play in iframe, at present only one video playing at a time, for handling next video i tried onPlayerStateChange() event, but event not fires when video is ended, is there any way to fire an event when video is ended or play multiple video one after another. any one please help me.
i have tried this below code.
html code:
<script type="text/javascript">
function ifplayer_onPlayerStateChange() {
alert("statechanged");
}
</script>
<iframe id="ifplayer" runat="server"/>
cs code:
ifplayer.Attributes.Add("src", "//www.youtube.com/embed/videoid");
ifplayer.Attributes.Add("onload", "ifplayer_onPlayerStateChange();");
I tired this below code to play another video after first video ended, it's working for me.
<iframe class="ytplayer" src="https://www.youtube.com/watch?v=pwfnT4CKoJo?enablejsapi=1" id="player" height="500" width="600" runat="server"></iframe>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange },
});
}
function onPlayerStateChange(event) {
switch(event.data) {
case 0:
document.getElementById('player').src = "https://www.youtube.com/watch?v=bhGQSsuTjmw?enablejsapi=1";
onYouTubeIframeAPIReady();
break;
case 1:
alert('video playing from ' + player.getCurrentTime());
break;
case 2:
alert('video paused at ' + player.getCurrentTime
break;
}
}
</script>
I would recommend taking a look at the YouTube API First and see if that can take away some of the work you need to do as google might have already created a solution to that.
You can find it here: https://developers.google.com/youtube/code_samples
I am using Xamarin to develop a cross-platform mobile app for both Android and iPhone. In my app I have to programmatically play a YouTube video. For the Android part I used a bind version of the official YouTube library and I have finished it without problem.
For the iPhone part I am unable to find a working library that could let me programmatically play the YouTube video.
I have tried the YouTube iframe API sample code from the following link: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
The code I used is like this:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<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',
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>
</body>
</html>
In the browser from my desktop, it auto-start the video after it is loaded using the startVideo() method. It works perfectly fine on desktop browser until I bring it to the iOS web view. It can load the video but it does not auto-start, which is one of our customer's requirement.
I understand that there are iOS library which could do the auto-play feature, but as I lack the knowledge on iOS native development, I am unable to do the iOS binding process.
I have tried other solutions like the followings:
https://github.com/afalz/YTHelper
https://github.com/nodoid/YoutubeBindings/tree/master/GoogleYoutube
But none of the above could work.
Any suggestion on how to do the auto-play feature in Xamarin?
Hi coder i am new to jquery. i serach alot but fail to find this what i am looking is not a customize application, i just want process or method how we can achieve this.
Suppose i have a menu or link like below
Home
About
Contact
As a link or menu and when i click on that any of the link or menu i srcoll down to position of the page where details for it present..
Just like This link where click on the above menu scroll to the
position of it on the page
This should be a single page application.
Any idea's or tutorial for this i want to do it jquery.
I can use scrollup(), scroll(), animate() but how to proceed this that is the main concren any help would be appreciated.
Are you by any chance talking about HTML anchors?
http://www.echoecho.com/htmllinks08.htm
This is the best link for your solution
Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation
In this link you get how to stick your menu using this
$(window).scroll(function () {
var window_top = $(window).scrollTop()+12; // the "12" should equal the margin-top value for nav.stick
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top) {
$('nav').addClass('stick');
} else {
$('nav').removeClass('stick');
}
});
use scrollto.js file to scroll through the page and call it in that function for smooth scrolling
$("nav a").click(function (evn) {
evn.preventDefault();
$('html,body').scrollTo(this.hash, this.hash);
});
I hope this will help you
$('html,body').animate({scrollTop: $('#scrollToId').offset().top});
Check this solution jQuery scroll to element
I have a set of objects and each those object keep track of some strings.
Those objects are created at page load and stored in an object array.
I have four user controls in ascx file that displays those strings of a particular object at a time.
And also I have a play button in the same ascx file which is default set to play.
When I load the ascx it displays the first set of strings in a particular object.
And after 5 second time interval iy should display the second set of strings in the next object. When the play button pushed, it should move into pause state also.
Can anybody give me a start to achieve this requirement. my code behind file is C#
Fundamentally, you want a 'Slideshow' of your ASCX controls. A common way to do this is by having all your ASCX's visible and then use Javascript and CSS to make one visible at a time.
Google for 'html css javascript slideshow'.
http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders
Just realised you might want to achieve this via front-end JavaScript as per your question title? In which case, you will need the setInterval function, and your array of data available in the DOM.
Suppose your button is
<asp:ImageButton src="source.jpg" class="btnPlay" alt="Play" />
Your JavaScript (using jQuery) could be along the lines of:
$(function() {
$('.btnPlay').click(function() {
$(this).toggleClass('btnPause');
if($(this).hasClass('btnPause') {
yourHandlerID = setInterval ("yourHandler()", 5000 );
} else {
clearInterval (yourHandlerID);
}
});
});
You can also do this via C# code behind using the timer class, example like:
http://www.csharphelp.com/2006/02/c-timer-demo/
And everytime the timer triggers the event handler you define, you can reiterate through your array, display what you want.
The toggle pause button would be just stopping the timer.
Microsoft reference:
http://msdn.microsoft.com/en-us/library/system.timers.timer(VS.71).aspx
I have a command line C# server and an ASP.NET client, they both communicate via .NET Remoting. The server is sending the client still images grabbed from a webcam at say 2 frames a second. I can pass the images down to the client via a remote method call and the image ends up in this client method:
public void Update(System.Drawing.Image currentFrame)
{
// I need to display the currentFrame on my page.
}
How do i display the image on the a page without saving the image to the hard disc? If it was a winForms app i could pass currentFrame to a picturebox ie. picturebox.Image = currentFrame.
The above Update method gets fired at least 2 times a second. If the client was a winForms app i could simply put picturebox.Image = currentFrame and the current frame on the screen would automatically get updated. How do i achieve the same effect with ASP.NET? Will the whole page need to be reloaded etc? I want to basically make it look like a live video feed!
You have left one player out of your game: the browser. Your question really is: how do I make the browser, on some random computer in the Internet, update an image it is displaying based on what's happening in a server.
The answer, of course, is: you don't.
You can place the image inside of an UpdatePanel, and update the panel based on a timer. The URL for the src property of the image would have to lead to a HttpHandler (.ashx file) of your own, that would call the server to get the latest image.
Always remember how the Web works: the browser is in control, not the server side.
P.S. .NET Remoting has been deprecated in favor of WCF.
You will need to have a page or handler on the server to render the image. That's its job. Then you can have javascript in place on the page that displays the image that acts on a timer (window.setTimeout) and is constantly polling the server for an updated image. You probably want to make the request somewhat dynamic in the querystring so you don't get stuck redisplaying a cached image instead of a new image delivered by the server. Something like
<script type="text/javascript" language="javascript">
i = 0;
window.setTimeout(updateImage, 500);
var img = document.getElementById('img_to_update');
function updateImage() {
img.src = 'imageRenderer.aspx?req=' + i;
i += 1;
window.setTimeout(updateImage, 500);
}
</script>
Where i only serves to keep the request unique to prevent caching issues.
Anyway, is that the exact script? Perhaps not, I wrote it off the top of my head and it has been a while since I've done anything similar. But it should give you an idea of how you can achieve part of this client-side indepenent of the server side technology. (This script could be on any page, static or dynamically rendered.)