Im pretty new to js/jquery and need some help from someone more knowledgeable!
I have had a good look on this site and on the web but cannot find the answer myself. I've played around myself but with my limited knowledge I just cannot figure out what to do next.
What I've got
I have an img that when clicked is replaced by an iframe (youtube video), much like a placeholder/poster, and that works perfectly with the below code, which I originally found here: How to add a splash screen/placeholder image for a YouTube video:
<div class="playbutton"></div>
<img src="image.jpg" data-video="http://www.youtube.com/videolink">
<script>
$('img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $(this).attr('data-video') +'"></iframe></div>';
$(this).replaceWith(video);
});
</script>
As I said - it works perfectly when the image is clicked it is replaced by the video.
The Problem
I have now added a play button (currently a div but I can use img instead) floating above the img. If I click on the play button nothing happens (obviously as it is nothing to do with the script).
I want this play button to "trigger" the replacing of the img with the iframe but I do not have a clue what to add to my script to make this happen.
What I'm looking for
I'm looking for the play button to be the "trigger" when clicked or ideally to have both the play button and the img as "triggers" so it works if a user clicks on the image too and not just the play button.
While I've got you...
Would I also be able to replace the iframe with the img again if a close button is added to the mix and clicked on?
Any help will be greatly appreciated!
Dale
This will do All you want including close button:
Here is the working fiddle:
http://jsfiddle.net/ANRHT/6/
js:
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+$('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
HTML:
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
$("#play-button").on('click', function () {
//this fires the same click event from your code.
$("img").trigger('click');
});
$("#close-button").on('click', function () {
$("iframe").replaceWith("<img src='image.jpg'>");
});
Related
I have a page with multiple HTML5 videos on it. For each video, there is a "poster" image that sits on top of the video. When someone clicks the poster image, the image disappears via CSS, and the video below it plays.
My problem is that I can only get the FIRST video on the page to play when someone clicks it. I'd like the user to be able to click any of the videos on the page to play them. My guess is that I somehow need to incorporate the "each()" function into the jQuery code.
Here is my current jQuery code:
$('#videocover').click(function() {
var video = $('#wp_mep_1').get(0);
video.play();
$(this).css('visibility', 'hidden');
return false;
});
Below is a JSFiddle with multiple videos on the page, but only the first one working when you click it. Feel free to play around:
https://jsfiddle.net/rtkarpeles/ammebd3k/3/
Thanks in advance for any and all help you can provide!
You cannot have multiple elements with same ID. Change them to class.
Change the video-container from ID to class and videocover as well.
<div class="video-container">
<video>...</video>
<div class="videocover"></div>
</div>
With the above structure the below script should work fine.
$('.videocover').click(function () {
var video = $(this).closest('.video-container').find('video')[0];
video.play();
$(this).css('visibility', 'hidden');
return false;
});
.closest() will fetch the first match when traversing through ancestors in DOM
Here is a demo https://jsfiddle.net/dhirajbodicherla/ammebd3k/5/
Change your IDs to classes.
https://jsfiddle.net/ammebd3k/6/
.videocover and .wmp_mep_1
IDs must be unique on a page, or else you run into exactly your issue.
I've been using SublimeVideo, and I've done so much with it already for the site I'm working on.
I've got 15-20 videos that I'm successfully using via SublimeVideo on a site in the basic way, by having a link on the page the user clicks on, and when clicked, the video opens in the SublimeVideo lightbox and starts playing.
But now, I'm needing to create "shorter URLs" for these videos that can be sent out in print publications and emails, and where the user is taken to the website to view, not just the video file.
Ideally, I was hoping to just use the id/data-uid with a hashtag in a single-page url and have the chosen video to automatically launch'n'play within the lightbox. That seems to be impossible (?).
I could settle with having a single page with the video tags hidden and have the hashtag unhide it and play it when in the URL. If none of this can work in a slick way, maybe I'll just go old-school and make a page for each video and just embed it in the page..
Anyway, after scouring all the documentation pages, their forums, and searching the web, I've only found a couple of options - neither of which have actually worked. I'll paste them below:
First, here's an example of the HTML I'm using for all the videos:
<p class="">video1 text link on page</p>
<video id="video1" data-uid="video1" title="video1 description" poster="/assets/images/video1.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/video1.mp4" />
</video>
That, by itself, works great! I don't want to change that. When the text link is clicked, the lightbox opens and the video plays perfectly.
So, let's say the page that holds the 15-20 videos with the above code for them is at:
http://example.com/resources/index.php
I thought I could simply make that URL for the first video:
http://example.com/resources/index.php#video1
...or even better...
http://example.com/resources#video1
...and follow suit for all the other video IDs.
And to get that to work, I've tried:
<script type="text/javascript">
sublimevideo.ready(function()
{
if (window.location.hash == '#video1') {
sublime('video1').play();
} else
if (window.location.hash == '#video2') {
sublime('video2').play();
} else
if (window.location.hash == '#video3') {
sublime('video3').play();
}
});
</script>
...that doesn't work. For some reason it works with whatever the first video is on the page, but by "work" I mean, it unhides it and makes it playable, not open in the lightbox and auto play.
So then I found code in the sharing documentation area like this:
<script type="text/javascript">
var hashtag = "#video1";
var hashtag = "#video2";
var hashtag = "#video3";
if (document.location.hash == hashtag) {
showTheVideo(hashtag);
}
function showTheVideo(hashtag) {
}
</script>
...but that doesn't work either.
Could somebody that does know JavaScript please spell it out for me?
I'll put the code that fixed the issue for me here in hopes it helps somebody else someday that may search and find it.
By putting the below code in the head of the page, under the...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/UniqueIDprovidedInYourAccountGoesHere.js"></script>
...library (which is the random characters/numbers .js that SublimeVideo gives you in your account area), I was able to finally get the above detailed problem to work (YAY!!!).
So, using the same example as above, this URL now works as I needed (by not only taking you to the resources page, but also by launching the particular video in its lightbox).
http://example.com/resources.php#video=interview2
...and by putting:
RewriteRule ^resources$ resources.php [L]
...in the .htaccess file in the same dir, I was able to make it even easier for the user:
http://example.com/resources#video=interview2
As I understand it, the below JavaScript addition finds the hash, then looks for the "video=", then takes whatever is after that, and if it finds a matching "id" in an "a" tag, then it tells it to do it's SublimeVideo thing by launching that video in the lightbox. Brilliant!
<script type="text/javascript">
$(document).ready(function () {
var lochash = location.hash.substr(1);
var mylocation = lochash.substr(lochash.indexOf('video='))
.split('&')[0]
.split('=')[1];
sublime.ready(function () {
var lightbox = sublime.lightbox(mylocation);
lightbox.open();
});
});
</script>
Here's the HTML part (for reference):
<p class="">video2 text link on page that i left as reference for the user in case they close the video that was launched from the publication</p>
<video id="video2" data-uid="video2" title="video2 description" poster="/assets/images/interview2.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/interview2.mp4" />
</video>
Also note: I found out through trial and error that the name of the video in the URL, after the "#video=" must be the same as the "ID" in the "A" tag, not the "video" tag! So, you'll notice that the "id=" is (and needs to be) different between the two. The "id=" in the "video" tag is instead the same as the "href=".
I'm creating a simple game of Simon, and I want the easiest way to code where if one of the four buttons is clicked, it changes the image for a second or so (on mode), plays a sound, then goes back to its original color. Right now I've searched, but everything I've seen has to do with divs, or other types of questions.
As of now the button changes to the on button image, plays the sound, but when I try any function to hide or fadeOut or anything of that sort, it goes to a strange greyish color, but does not disappear. I've tried to use attr() to set the image back to what it originally was with a delay in between, but that doesn't work, either. The code is long, but I'll post what's relevant...
<audio src="sounds/1.mp3" id ="snd1"></audio>
<audio src="sounds/2.mp3" id ="snd2"></audio>
<audio src="sounds/3.mp3" id ="snd3"></audio>
<audio src="sounds/4.mp3" id ="snd4"></audio>
<div id="juego">
<div id="simon">
<div id="c1"><img id ="c1i" src="imgs/d1.png"></div>
<div id="c2"><img id ="c2i" src="imgs/d2.png"></div>
<div id="c3"><img id ="c3i" src="imgs/d3.png"></div>
<div id="c4"><img id ="c4i" src="imgs/d4.png"></div>
</div>
and from my js file...
$("#c1").on("click", function() {
$("#c1i").attr("src", "imgs/1.png").hide("slow");
$("#snd1")[0].play();
});
edit: I will also add that clicking the button as of now only lets me click it once to perform the function. After one click, it just greys out. No color change, no sound played. Mystifying to me...
try this :
$("#c1").on("click", function() {
// change the image , and make sure this image path exists ...
$("#c1i").attr("src", "imgs/1.png");
// make it disappear and play the sound after 1 second
setTimeout(function(){
$("#c1i").hide();
$("#snd1")[0].play();
},1000);
});
I am trying to use jQuery to dynamically assign listeners to anchors to play sound on mousedown and pause on mouseup. Here's my html:
<p>Meet
<a class="easter-egg">Buck
<audio class="egg-aud" src="file.mp3">
<source src="file.ogg" />
</audio>
<img class="egg-img" alt="" src="file.jpg" />
</a>.
</p>
And my js:
$( "a.easter-egg" ).mousedown( function() {
$( this ).find( "audio.egg-aud" )[0].play();
});
$( "a.easter-egg" ).mouseup( function() {
var audio = $( this ).find( "audio.egg-aud" )[0];
audio.pause();
audio.currentTime = 0;
});
EDIT: In jsfiddle my code works perfectly until I wrap the <p> in a <div class="entry-content">, at which point it breaks. I pasted a sample of my website into jsfiddle, where you can try deleting the div and see that it works without it.
Problem:
You were trying to set currentTime of audio tag that has been appended dynamically. Thus, you have to wait for audio tag to be ready to play.
Solution:
Check whether the audio element is ready to be played using the canplay event.
// When the audio element "can"be"play"ed, fire the function.
audio.addEventListener("canplay", function() {
this.currentTime = 0;
},true);
Comments:
Previously, the error you had been getting in the console was:
"Error: An attempt was made to use an object that is not, or is no longer, usable."
Do keep checking the errors, they are very useful :)
The same thing applies for <video> tags that have been appended dynamically.
Live Demo
Hope that helps !
Aaaaand right after I went to bed I realized the problem. I recently wrote a script that changes the text of each instance of an author's name into a link to their list of posts. To do this it replaces the contents of each p element with a new string, which means it recreates the anchors and audios that I'm working with. So ill i guess ill just have to make sure that happens first.
The concept is this, You place JS Code for a video in a div, then you have jQuery Code that executes when that div is clicked. I.E When you Play/Pause or whatever in the video the event should trigger. In my example I have delayed text showing up:
As Seen Here
http://jsfiddle.net/R9Wm4/7/
If you run this is FF it works fine, if you run it in IE. or Chrome it does not trigger the click event.
This behavior is for any JS embeded video, regardless of YouTube, Vimeo, Amazon s3 ETC.
Is there something I am doing wrong or is there a work around (i.e. put an clear image or something over the whole Div, this is driving me crazy..)
Note: I have tried useing the MouseDown event instead of click and this does work, however it doesn't start my video on a single click :-/ (except again in FF, which works fine)
In case you don't like jsFiddle here is the JS Code:
$(function(){
$('.content').hide();
$('#delay-start').click(function(){
if($('.content').is(':hidden')){
$('.content').delay(1500).fadeIn(1000);
return false;
}
});
});
And HTML:
<div id='delay-start'>
<script type="text/javascript">
var playerhost = (("https:" == document.location.protocol) ? "https://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/secure/" : "http://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/player/");
document.write(unescape("%3Cscript src='" + playerhost + "flv/460089AC-DCB0-154F-0F5574AA57B9963A.js?t="+(Math.random() * 99999999)+"' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
<div class='content'>
<p>Welcome to my Hidden and Magical Text! Enjoy Your life</p>
</div>
This seems to be too big an issue for the brain trust of the internet! So I removed the click functionality and just set a delayed timer and auto play on the video. A solution that works in all browsers :-)