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.
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.
The site is a simple landing page with a hero video background that autoplays and when you click the search box(which is in the center of the video) it unmutes and plays the audio from the video. Our mute/unmute button works great but they want the click of the video to also mute/unmute. Whenever I add the element of the video-overlay to the function, everything on top of it works as a mute/unmute too which we don't want, it breaks our search tool.
I've tried creating an element specifically for mute/unmute but it still stays on top, I've tried adding different classes to the mute/unmute function (Hero.onMuteClick). I looked into stopPropogation but I wasn't able to figure that out.
https://jsfiddle.net/kevingsp/9xhzr1by/2/
I expect clicking the video-overlay to mute/unmute the audio from the video.
Thanks for reading!
Edit/Update
I followed the steps below and it worked, I made the original mute/unmute button unclickable in the CSS with pointer-events:none; so the background/overlay could only control it.
Thanks!
Why don't you use focus and focusout.
Take a look at the follwing snippet.
init: function() {
$(".muteunmute").click(function(e) {
Hero.onMuteClick();
});
$('#inputSearch').on('focus',()=>Hero.unmute() ).on('focusout',()=>Hero.mute() );
}
Edit
Sorry I misunderstood you.
Hope the following snippet fits your needs :)
The problem is that all the elements are children of '.video-overlay', so you have to check which one is the real target.
init: function() {
$(".muteunmute").click(function(e) {
Hero.onMuteClick();
});
$('.video-overlay').click(function(e){
if($(e.target).hasClass('video-overlay-content'))
{
Hero.onMuteClick();
}
});
}
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!
On a page, there is a button. When the button is clicked, a dropdown shows up. The dropdown contains an image. The problem is that the image is not fetched until the user clicks the button.
$("#my_button").click(function(){
$("#my_dropdown").html("<img src=\"http://mysite.com/image.jpg\" />");
});
I'd like to fetch the image when the page loads so it's ready to go when the user clicks the dropdown. How can I do this? I was thinking I could insert the image into the page with display:none set, so it'll get in the cache, or is there a way to load in when the document loads in jQuery?
This is for a Chrome extension, if it makes any difference. I suppose I could put the image in the extension (and that would be faster), but I'm still curious if it's possible to load the image using JS.
Thanks,
Kevin
Yes. Just define it as a new image in the ready() call of the page:
$(document).ready( function() {
var preload = new Image();
preload.src = "http://mysite.com/image.jpg";
});
Then when you use it, it will already be in the browser's cache. You can use the variable or just reference it the same way you already are.
You could preload each image...
$(document).ready(function() {
(new Image()).src = '/path/to/myImage.jpg';
});
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.