I have youtube video embedded in my page inside of a div which can be hidden and shown with a button (using jQuery/css). When I hide and show then show the div the video has to reload and start form the beginning. Is there a way to remember the video's progress and playback form the same position? Or better yet a way that that video would not have to reload?
Here is the html5 for the div/you-tube video:
<div id="you-tube-div">
<object width="640" height="390" data="http://www.youtube.com/v/fQ2Lnln2BOk" type="application/x-shockwave-flash">
<param name="src" value="www.youtube.com/v/fQ2Lnln2BOk"/>
</object>
</div>
EDIT:
Here is a little jFiddle that shows what I am trying to do:
http://jsfiddle.net/ntk3B/
I recommend converting your object embed to the newer iframe element for embedding the youtube video. Using code from this stackoverflow post:
How to pause a YouTube player when hiding the iframe?
//via: https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("you-tube-div");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
I've created this fiddle that does what you want:
http://jsfiddle.net/RSDxC/2/
Do you need to hide the video using the property "display"? If you use the property "visibility", and values "visible" and "hidden" to control the visibility of the item then the video will hold it's paused place.
Here is a link about the difference between the display and visibility properties...
Here are some additional things to consider:
If you don't pause the video, and you set visibility to hidden, then the video and audio will continue to play. However you could use the youtube javascript API to control the video.
If you use visibility, block elements will still be affecting the elements around them, you just won't be able to see them. That's why the property is simply "visibility"
If you do want/need to use the display property, which would not be surprising, then you are going to want to store certain information about the video in a variable when you choose to hide it (e.g. it's point in playback), and then use that value when you click the button again to display the video but starting from the point in the video where you left off. I can't recommend getting to know the youtube API enough... this will give you the power to manipulate youtube videos as you wish. Let me know if you have any questions and best of luck!
Related
I am using one iframe to display multiple videos, one at a time, by changing the value of its src attribute.
Users can close the video, which actually hides the iframe behind an overlay.
Next time,
the user chooses another video on a slideshow
the iframe's src changes to the new one
the user clicks a Play button\
the overlay becomes invisible
the iframe shows up and plays the new video.
The issue I am facing is that between step 4 and 5, users always see the image of the old video momentarily before seeing the new one, which is not good.
I guess that is because the iframe is still loading the new video, during which time it still keeps the old video.
I can think of two ways to solve it:
right after every time the src changes in step 2:
force the iframe to load the new video. The change of src is prior to playing the video, so when the video plays, the iframe should have already abandoned the old one for some time.
"clear" the iframe so it is empty now, and should display a blank screen prior to finishing loading the new video.
But I don't know how to achieve either... Is there a function in iframe like
let iframe = document.getElementById("iframe_id");
iframe.clearCache();
// or
iframe.reload();
?
(I maybe able to desctroy the iframe HTML element every time and recreate it, but it seems costly and not very elegant...)
Thanks in advance!
I looked into it, and I adapted this (example 1) example. Here are the changes I made
Please look at the link for complete code. What follows are strictly modifications for simplicity
<input type="button"
id="hider"
value="Hide"/>
<script>
function reload() {
console.log(document.getElementById('iframeid').src);
// if we are currently watching Bob1, we will load Bob2
if (document.getElementById('iframeid').src.includes("Bob1"))
document.getElementById('iframeid').src = 'Bob2.webm';
else
document.getElementById('iframeid').src = 'Bob1.webm';
}
//Wait for reload, and then show iframe. This is the money
document.getElementById('iframeid').onload = () => document.getElementById('iframeid').style.display = "block"
btn.onclick = reload;
//when we hit the hide button, hide our iframe
hider.onclick = () => {
document.getElementById('iframeid').style.display = "none";
};
</script>
To use this, you should first hit the hide button and then press the refresh.
I changed the refresh button to switch between two videos, and then after it has loaded, then and only then should it show itself. This at least for me avoids your issue.
You will need to change this example to your usecase, such as
document.getElementById('iframeid').onload = () => document.getElementById('iframeid').style.display = "block"
to the display that your iframe uses.
I have a html5 video which is background of my website, and on that video i am placing some text like Welcome to blah blah blah.....
Initially the video will not be played, but when user clicks on play button the video will start playing, here I want to fadeOut the text which am showing on that video.
When user clicks on pause the text should be displayed, when clicks on play it should be fadeout. This is story :-)
I found below things
$("#player").get(0).paused
$("#player").get(0).play()
$("#player").get(0).pause()
But didn't found
$("#player").get(0).played
How to detect if my video is playing or paused? I need something like below
if(video == "playing"){
$("#introText").fadeOut();
else {$("#introText").fadeIn();}
}
Thanks in adv...
To detect if your video is playing or not, you can use playing (or play) and pause events and then you can show or hide your text :
HTML :
<video id="video">
<!-- your videos -->
</video>
JS :
$(function(){
var video = $('#video')[0];
video.addEventListener('playing', function(){
$('.text').fadeOut();
})
video.addEventListener('pause', function(){
$('.text').fadeIn();
})
})
You can of course use a var to indicate your video state ( playing or not ) and then use it in another part of your code not directly inside your events handlers.
You can see this code working here.
Hope that can help.
There is a "play" event, which fires when the video begins playing, and a "pause" event that fires when the video is paused.
Alternatively, the "paused" property will be false when the video is playing and true when it is not.
Why not just trigger the event on the play button click?
$("button").click(function(){
$("#div1").fadeToggle();
})
That way you don't have to detect, simply toggle the text.
Reference :
http://api.jquery.com/fadetoggle/
I have an absolutely placed div with an embedded YouTube video inside of it. I am placing it over another image on my website with the intention of showing first-time visitors a short video, then hiding the div with the video to reveal the original content of the page.
I know how to hide and show my div with click events, but I am very new to Javascript. I need help writing the function that would determine the YouTube video has ended and apply visibility:hidden to my div. Any help is greatly appreciated!
your going to want to take a careful look at the documentation, paying special attention to the Events section.
you will be using
onStateChange:
This event is fired whenever the player's state changes. Possible values are unstarted (-1), ended (0), playing (1), paused (2),
buffering (3), video cued (5). When the SWF is first loaded it will
broadcast an unstarted (-1) event. When the video is cued and ready to
play it will broadcast a video cued event (5).
and you will want to do something when the state equals 0, which means ended, something similar to the below:
// attach your listener
function onYouTubePlayerReady(playerId) {
var ytplayer = getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
// your callback function
function onytplayerStateChange(newState) {
if (newState === 0){
$('yourContainingDiv').hide();
// or if you want to just remove it...
$('yourContainingDiv').remove();
}
}
if you are having trouble with addEventListener, check out YouTube player api - addEventListener() does not work for me?
addEventListener looks like it isn't supported by early versions of IE and might be slightly buggy
I've got a nice image on my website that has a play button on it. What I'd like to do is replace that image with a video (longtail video player) when a user clicks on the image. The image can be wrapped in a link or whatever.
Usually, people just have this sort of thing pop up a modal window but I was hoping for a slicker solution that would happen in the same space that the image was inside.
Is there some way to accomplish this using jQuery?
There are a number of ways to accomplish this, but there often quirks in the different browsers that you may have to work through.
One way is to embed the player on the page within a view that is hidden with a style (display: none). The player may have to have the wmode property in the flash embed set to "transparent" to do this. You can then hide the image and show the embed in the same location with jquery's hide and show methods:
$('#img-el').click( function () {
$(this).hide();
$('#player-embed-div').show();
});
Another way to do this is to use SWFObject (http://code.google.com/p/swfobject/) to embed the video dynamically on clicking the image:
$('#img-el').click( function () {
var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.write("img-el");
});
You may need to tweak the code above to get it to work and you may have trouble across browsers since the handling of Flash embedding is different across them.
You can replace the image with a <div> when clicked, and then setup the video player like this: http://jsfiddle.net/hxaZx/.
$("img").click(function() {
var $div = $("<div>").text("this is the div to use for video");
$(this).replaceWith($div);
// jwplayer($div.get(0)).setup({ ... });
});
If you don't mind the video being include onload, then I would embed both the image and the video and hide the video on startup. then, bind a clickhandler to the image that will hide the image and show the video.
var $image = $('#myimage');
var $video = $('#myvideo'); // hide #myvideo with css
$(function(){
$image.on('click', function(){
$image.hide();
$video.show();
});
});
A little while ago I was looking for a way to make the jpeg thumbnails of YouTube videos into a link to enlarge and open a player, in a similare way to the way Facebook shows videos in newsfeed.
The solution I used (which is definitely not the oly way, but worked for me) is similar to the answer from Pimvdb.
I simply had another page which had the YouTube player embed code on it (dynamically populated with the correct video by passing a variable to the URL) and then loaded that in with jquery.load
$('#imageElement').live("click", function () {
$('#currentlyHiddenVideoDiv').load('videoPage.asp?vidid=idOfVideoToPlay').show()
}
You'd have to have your own method of passing the required video id/link into the player page and of course, I realise this is not with the YouTube player, but an embedded player in a separate file loaded into the required page in this method should work much the same.
This means that the video content is only loaded in when required, to the that point you just load your player button.
I have a YouTube video embedded in my page. It is hidden (display:none). You need to click one of the video link buttons to display the video and play it. The links are defined like this:
Video 1
Video 2
xxxxxxxxx represent YouTube video IDs.
Here's the play function:
function play(id)
{
ytplayer.style.display = 'block';
ytplayer.loadVideoById( id, 0, 'hd1080' );
}
It's fundamentally pretty simple! But here's the problem. since the video player is hidden, the flash object is not activated. So when I click a video link, the line ytplayer.style.display = 'block'; displays the video player, but it takes about about half a second for flash to load. During this time it cannot accept any method calls, such as the next line ytplayer.loadVideoById( id, 0, 'hd1080' );. Essentially, I have to click the link twice, once to load up the flash video player, the second time to actually load the video into the player.
It looks like once you enable the video, you need to setup and wait for a callback:
onYouTubePlayerReady(playerid)
(Taken from this page: http://code.google.com/apis/youtube/js_api_reference.html)
In that function you could then do any calls that require the player to be loaded:
ytplayer.loadVideoById( id, 0, 'hd1080' );
If you aren't using the chromeless player, you may need to instead listen for the onStateChange and onError events.