click a button to load a different video player into div - javascript

i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!

You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/

Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.

jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example

thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!

Related

Youtube video autoplay with jquery

I wanted to make a website with Youtube video iframes, which starts to play on hover.
I've found this post Play youtube video on hover
This code works(video start to play on hover) but not all videos work (links seem to be broken).
The same thing happens when I use other videos so that's not broken links. I've found a post suggesting changing 'iframe' into 'embed' and this fixed broken links but then script stops working.
My script looks like below:
https://codepen.io/EwelinaWoloszyn/pen/dybQGWe
<script>$(document).ready(function(){
var nowPlaying = "none";
$('div').hover(function(){
nowPlaying = $(this).find('embed').attr('src');
$(this).find('embed').attr('src',nowPlaying+'&autoplay=1');
}, function(){
$(this).find('embed').attr('src',nowPlaying);
});
});
What should I change to make it work?
Many thanks in advance,
Neko
God forbid me for using W3Schools, but video elements in HTML5 have play() function in JavaScript
Documentation: https://www.w3schools.com/tags/av_met_play.asp
Your code:
$('div').hover(() => {
$(this).find('embed').play();
});

Javascript - Displaying a different video depending on clicked video

So, I'm still new to javascript and everything. What I'm trying to do is when a small video is clicked, display it on the main big video above. This is the script so far, but I'm not sure what I need to add.
<script type="text/javascript">
$(document).ready(function() {
$(".littlevideo").click(function() {
var video = $(this).closest("div").find("video").attr("src")
$('#displayvideo').attr("src",video);
});
});
</script>
you want to do something like:
<script type="text/javascript">
$(document).ready(function() {
$(".littlevideo").click(function() {
var video = $(this).closest("div").find("video").attr("src")
$('#displayvideo').append("<iframesrc="+video+"></iframe>");
});
});
The append basically adds that HTML to the container. you do the +video+ because it adds whatever that value is, to the existing string. This is how you make it dynamic.
We need the rest of the page (preferably), but that piece of code should do what you are wanting. Basically, the code just takes the attributes of the element being clicked on (as long as it has a class of "littlevideo") and transfers it to the #displayvideo element (I'm guessing the "big video" you're talking about). Make sure the little video's elements/tags all have class="littlevideo", and the big video player element/tag has an attribute of id="displayvideo".

JS / JQUERY iframe.contents() syntax

I'm currently working on a project which includes when the user hovers over a certain div then it will play the associated audio file and stop all other audio elements on the page that contain the class 'stoppable' in them.
I've got the code working but now I'm having that page as an iFrame on another page which can insert elements into the iframe, so I have to keep adding iframe.contents on elements to make them work.
On the code below it detects when the user has entered the div and plays the correct audio however it does not stop all the other audio elements.
I believe I have the incorrect syntax on the
$('.stoppable:not($("#new-audio-476333", iframe.contents()))
section, and I'm not sure what the correct syntax would be.
var iframe = $('#clientframe');
$('#476333',iframe.contents()).mouseenter(function() {
$('.stoppable:not($("#new-audio-476333", iframe.contents()))').each(function(){
this.pause(); this.currentTime = 0;
});
var audio = $('#new-audio-476333', iframe.contents())[0];audio.pause();audio.play(); });
Any help would be greatly appreciated.
Thanks!
-Hopeless
$('.stoppable:not(#new-audio-476333)', iframe.contents())
This means that elements with class name stoppable which its id is not new-audio-476333.

Video Gallery: Click on text, have video appear

This would seem to be an easy task with HTML, CSS, and/or Javascript, but I cannot frind a solution, either by Googling it, or consulting the database on Stack Overflow.
What I want, and have seen, is to have several rows of text naming videos on the left. When you click on one of the video names, the video will appear to the right or above. Every time you click on a video name, the video displays in the same box to the right. So, it's kind of like switching channels and the text anchors are your remote.
An example would be MSNBC, however I think this is way over my pay grade:
http://www.msnbc.com/msnbc/watch/clinton-on-email-scandal-i-want-it-resolved-612366403989)
Another example that I found by searching Stack Overflow, but uses images instead of video is this one:
http://imagethrow.com/design-studio-all-throws.html
My question is: Can a simple video player, that responds by clicking on text anchors, be created, or is this simply too complex (at least for my level of understanding, i.e. I don't do php). Thanks for any help.
Barry Glick
Ok for this to work, you need to create a container for the video and then have a set of links change the video source when clicked on them through JavaScript/jQuery.
As you are going with YouTube for the videos, we will be using the youtube embed code (iframe)
Demo - jsFiddle
$( document ).ready(function() {
// load video function on link click
$( "#video-list" ).on( "click", "a", function(e) {
// prevent default anchor behaviour
e.preventDefault();
// get the video URL from link
var videoID = $(this).attr('data-video');
// load the video into the iframe
$('#videoContainer iframe').attr("src", videoID);
});
});
#videoContainer {
height: 350px;
width:600px;
}
#videoContainer iframe {
width:100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- video container -->
<div id="videoContainer">
<!-- youtube's iframe embed code - you can set a default video here -->
<iframe id="youtube" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
</div>
<!-- videos list -->
<ul id="video-list">
<li>Lord Trolldemort</li>
<li>Fabulous Secret Powers</li>
<li>Consequences</li>
</ul>
The code is pretty commented but if you have any questions let me know!

Using JQuery toggle feature to show/hide a youtube but can't get it to stop playing on hide

I am using the jquery function to toggle a youtube video element on my site. It works great and shows/hides its as needed. However I can't find a way to stop the video playing on hiding the div. I keep reading about destroying the element then recalling it on the toggle but I don't know enough about the code to know how or where to do that within the toggle functions. Any help would be amazing. I've added my code below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
.vidblock
{
background:#ccc;
width:430px;
height:320px;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.toggle').click(function(){
$('.vidblock').toggle("slow");
});
});
</script>
and
<h3>Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</h3>
Okay! This one took me a little while to figure out, and when I tell you it's going to make sense.
Make sure you are calling the youtube api:
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
When hiding your div, use jquery to change the source of the video to the same video, without using autoplay. This stops the video from playing, and also sets it back up.
Another cool thing I found, is when opening my div, I turned it on autoplay.
You can see a demo on this page: http://advantageanywhere.com/index.aspx?sid=250
Click on the play link and it's going to open a lightbox (similar to what you are doing, showing and hiding the div. In it's original state I have it sitting there while hidden as a regular embed link. Once clicked, then it turns to autoplay, then when escape or X is clicked, it will close the lightbox and also change the video back to a normal embed (stops the playing)
We will take for example the following video:
The original embed from youtube [adding AN ID ( youtube ) to it to target in jquery, and the parm for youtube api ( ?enablejsapi=1 ) ]:
That is how you should have the image started off in it's hidden div.
Once the div is opened this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
Now, when the div is being hidden, this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
Below is the entire script I have setup. I tried throwing this together for you in a fiddle but I don't have the time right now and just stumbled upon your question when I am trying to punch out a deadline.
If you have any other questions I don't mind helping out, please.
$(window).load(function(){
var KEYCODE_ESC = 27;
$(document).keyup(function(e) {
if (e.keyCode == KEYCODE_ESC) { closeLightBox(); }
});
function closeLightBox() {
$("#lb1, #lb4").fadeOut();
$("#featureContent, #videoContent").hide();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
}
/* ------------ Light Box 4 Video ------------- */
var lightBox4 = $('#lb4'),
videoContent = $('#videoContent');
$('#anywhereVideo').click(function() {
lightBox4.fadeIn(function() {
videoContent.show();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
});
});
$('#close4').click(function() {
closeLightBox();
});
});
You don't have to destroy the element, just use the YouTube JavaScript API ( http://code.google.com/apis/youtube/js_api_reference.html ) to pause or stop the video.
You give the object a playerapiid, then you can target it with JavaScript.
You could use 'detach' -
$(function() {
var savedNodes;
$('.toggle').toggle(function() {
$('.vidblock').hide('slow', function() {
savedNodes = $('yourplayerid').detach();
});
}, function() {
$('.vidblock').append(savedNodes)
$('.vidblock').show('slow');
});
});
Demo - http://jsfiddle.net/Sf4LT/2/

Categories

Resources