Make a video player appear when a button is pressed? - javascript

I would like to make a video blog and use multiple video players, youtube and jwplayer. How would I make it so that youtube player appears by default and below it there is a button, when the button is pressed, the jwplayer appears and replaces youtube.
If anyone could tell me the code to use, that would be awesome and thanks to everyone in advance for helping!

Knocked you up a simple example:
http://jsfiddle.net/xxktz511/4/
It uses this single bit of javascript and the jQuery framework to change a child element of a parent blog item. As from what you are saying you will have many blog entries on the page.
// Use the jQuery plugin to find all DOM element that have a class of 'switch player'
// You can read up on jquery here: http://jquery.com/
$('.switch_player').click(
function(e) {
// Make a jQuery instance based on the 'currentTarget' or 'click' element
// Find that element parent that is the actual blog entry
var $blogEntry = $(e.currentTarget).parent();
// Then find all children that have either a youtube_video class or
// jqPlayer class and toggle their display status
$blogEntry.children('.youtube_video').toggle();
$blogEntry.children('.jwplayer_video').toggle();
}
);
If the video timing is the same then jwplayer can start a stream from a given point. It is in the documentation. However I do not know how you get the current time from youtube.
Let me know if you have any questions about the design.

do you mean something like this. Warning didnt test code myself but should work.
<form method="post">
<input name="button" type="submit" />
</form>
<?php
if (!empty('$_POST')){
//jwplayer video
}
else{
//youtubevideo
}
?>

Related

How do I use Javascript to delay visibility of a text box and then hide another box after the first becomes visible

Im very new to this and have reviewed other posts similar to this question. However, I'm finding that those solutions don't work for me.
Background: I'm working in Wix's Velo platform for Javascript. (forgive me if that's not the right technical terminology here)
My goal: When my website home page loads, I want one of the text boxes on the page (#text45) to NOT be visible until 5 seconds have passed. Then, when box #text45 is visible, I want another plain box (#box2) to turn to hidden.
I have found some examples like the one below: (not all code has been pasted and I realize some elements like div1 would need to change to my specific element names)
document.getElementById("div1").style.visibility = "visible";
}
setTimeout("showIt()", 5000);
However, I get an error code: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
When researching this, I found out that Velo cannot access the dom and elements can only be accessed via "$w".
Would someone be kind enough to set me in the right direction on how to accomplish the "goal" above? I would really appreciate it! Thank you in advance.
Here's how you would do it. Note, that it's good practice to change the IDs of your elements to more descriptive names, but I've stuck with the names you provided in your question.
Start by setting #text45 to hidden in using the Properties & Events panel.
Then use this code (note that your page might already have an onReady. If it's there an you're not using it yet, delete all the code on the page and replace it with this):
$w.onReady( () => {
setTimeout(() => {
$w('#text45').show();
$w('#box2').hide();
}, 5000)
} );

How do I open a link with a specific class within a jQuery method

I'm trying to make 2 plugins work together on a wordpress site. One is a sidepanel plugin that can be triggered by adding class="nks_cc_trigger_element"
to html <a href="..."> link coding.
The other plugin is an image mapping plugin that will only let me set the URL of a link, and I need the class attribute set to have it trigger the sidebar by clicking one of the mapped shapes of the image. The developers pointed me to the API with this code
$.imageMapProEventClickedShape = function(imageMapName, shapeID) {}
I have no experience with jQuery, and this seems like it should be a simple solution, but I'm lost. The relevant imageMapName and shapeID are simple enough to find, but I don't know how to simply open a link with jQuery or append that link with a class attribute.
Any help is appreciated!
http://jsbin.com/pirajo/6/edit?js,output
let a = document.querySelector("a");
if( a.classList.contains("hasClass") ){
a.addEventListener("click",function(e){
let link = this.getAttribute("href");
window.open(link,"_blank");
e.preventDefault();
});
}

jQuery appear() and show() methods difference?

I'm studying for a HTML, CSS, JS exam and found various resources to help me study. In doing a practice quiz, I found this question.
You are creating a page that contains detailed employee information for a company portal. The page uses a jQuery library. The page contains a hidden button named btnEdit that is defined by the following code.
<button id="btnEdit" style="display: none;">Edit</button>
The button is not displayed by default.
The button must be displayed only if the user is logged on.
You need to add code to the document.ready() function to meet the requirements for the button.
Which line of code should you use?
A. $ ('#btnEdit').appear();
B. $ ('#btnEdit').visible = true;
C. $ ('#btnEdit').show();
D. $ ('#btnEdit').Visible();
The quiz telling me that option A is correct.
I haven't use appear() method before.
My question is:
.appear(), Is this function really as a part of jQuery library?
I could not find .appear() function in jQuery doc. No results in jQuery API
Is that option A is correct? If it is correct can anyone tell me why?
As of my conscience option C is correct(If I'm wrong correct me).
Can anyone please tell me difference between appear() and show()?
And when to use appear(), when to use show()?
Show is a function to show a selected element.
e.g:
<i id='element' style='display:none;'></i>
to show hidden element
$('#element').show()
As Jquery says disappear/appear is a custom event you can fire once the element is shown. so it should look something like -
$('#element').appear(function() {
... code goes here
});
For jQuery reference
show - http://api.jquery.com/show/
appear/disappear - https://plugins.jquery.com/appear/
Edit - i think it's also safe to say that show is packed with options and a 'complete' callback which is fired once the element has finished shown.

Dynamically change videojs captions with addTextTrack()

I'm trying to build some thing like a video gallery which you can select a video to show up by clicking on its thumbnail. Now I'm at phase of loading appropriate subtitles for the chosen video. Thanks to google I understand that videojs has a method to help me called addTextTrack() but unfortunately there is not a good sample or documentation for it. After all I tried to find its parameters and behavior via reading the video.dev.js codes. but as I understand this method has just three params (kind, label, language) and the thing that I didn't understand is that: How can I set the src to load the subtitle file. I think its a bug and it doesn't work properly and I want to report it if you're agree with me.
The following code adds cc icon to the player but it doesn't show the subtitle (How can it be shown when I didn't tell him the URL to load)
var myPlayer = videojs('video-id');
myPlayer.addTextTrack('captions', 'En', 'English');
I checked videojs 5.0.0 addTextTrack method and there wasn't any significant changes.
After about a month without any answer to my question, I don't know yet why addTextTrack() doesn't work properly. But thanks God, I found a way to achieve my goal:
To dynamically changing all text tracks
var oldTracks = player.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
player.removeRemoteTextTrack(oldTracks[i]);
}
myNewTracks.forEach(function(track) {
player.addRemoteTextTrack(track);
});
The text track did never get updated dynamically and after a long search, I had found a solution for my problem. When I change the video source I replace the text track and set it on mode="showing":
let player = videojs('first-player');
player.addRemoteTextTrack({
kind: 'captions',
src: 'my-track-path.vtt',
mode: 'showing'
}, false);

jQuery .attr Not Working Properly, Miss-Retrieving Links

This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.

Categories

Resources