I am currently working on a project that is a navigation and a video player in the same div container.
https://i.stack.imgur.com/W49lY.png
https://i.stack.imgur.com/s89Oy.png
Once you click on one of the four boxes, another video will pop up and show in that same position.
Which approach should I go with? HTML/JavaScript?
I am totally new to JavaScript, so I know that this code is wrong, but this is what I have so far.
<div class="row" style="margin-left: auto;">
<div>
<button onclick="Word()">Word</button>
<button onclick="Excel()">Excel</button>
<button onclick="PowerPoint()">PowerPoint</button>
<button onclick="OneNote()">OneNote</button>
<br><br>
<video id="word" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
<video id="excel" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
<video id="powerpoint" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
<video id="onenote" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
</div>
<script>
var myVideo = document.getElementById("word");
function Word() {
if (myVideo.onClick)
myVideo.play();
else
myVideo.pause();
}
function Excel() {
myVideo.play();
else
myVideo.pause();
}
function PowerPoint() {
myVideo.play();
else
myVideo.pause();
}
function OneNote() {
myVideo.play();
else
myVideo.pause();
}
</script>
</div>
I would use one function called videoSelect() and change the HTML content of a div with the id of player when the button is clicked.
innerHTML is used to change the html content of an element.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
(this.id) retrieves the button's id and passes it to your videoSelect function.
this.id = element
Full example here -> https://codepen.io/chaosmaths/pen/aKmOVm/
As a note the video URLs in your post were the same for all of the examples so I've changed the URLs to what I believe are the videos you wanted. If they aren't just change the URL in corresponding variable. You can also use the video tag instead of iframe. I just used that because it is what YouTube provides with their embed codes.
HTML
<div class="row">
<div id="options">
<button id="word" onclick="videoSelect(this.id)">Word</button>
<button id="excel" onclick="videoSelect(this.id)">Excel</button>
<button id="powerpoint" onclick="videoSelect(this.id)">PowerPoint</button>
<button id="onenote" onclick="videoSelect(this.id)">OneNote</button>
</div>
<div id="player"></div>
</div>
CSS
#options{
text-align: center;
}
#player{
text-align: center;
margin-top: 15px;
}
JS
var word = 'https://www.youtube.com/embed/S-nHYzK-BVg';
var excel = 'https://www.youtube.com/embed/rwbho0CgEAE';
var powerpoint = 'https://www.youtube.com/embed/XF34-Wu6qWU';
var onenote = 'https://www.youtube.com/embed/qN15XnU96vQ';
var player = document.getElementById('player');
function videoSelect(element){
if (element === "word"){
player.innerHTML = '<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
if (element === "excel"){
player.innerHTML = '<iframe width="560" height="315" src="' + excel + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
if (element === "powerpoint"){
player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
if (element === "onenote"){
player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
}
Related
I am trying to control an overlay function in HTML with an external js file and a second HTML page where the buttons are on.
So far it works when the buttons are on the same page. But I can not trigger the overlay from page 1 on page 2.
So the streaming page is the page where the viewer will be able to look and interact.
<div id="overlay" onclick="turnOverLayOff()">
<div id="textContainer"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true" width="640" height="415" frameborder="0" marginheight="0" marginwidth="0">Laden…</iframe> </div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="overlay.js"></script>
Then the JS file is
function turnOverLayOn(){
document.getElementById('overlay').style.display = 'block';
}
function turnOverLayOff(){
document.getElementById('overlay').style.display = 'none';
}
The second page from where I want to control the streamingpage from :
<div id="overlay" onclick="turnOverLayOff()">
<div id="textContainer">Test tekst whatever </div>
</div>
<div>
<button onclick="turnOverLayOn()">Click here to turn ON </button>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="overlay.js"></script>
As a means of signalling between the pages/tabs within the same browser you can use the BroadcastChannel api as mentioned in the comment above.
As demonstration - two basic HTML pages, both establish a connection to a common Broadcast Channel and one listens for messages from the other.
In the following the Video elements and iframes are commented out and replaced with simple text.
The getStyle function simply allows access programmatically to styles set on a named element and is used here to determine. The Javascript can be written to a single file and included in both pages as per the external.js...
Page 1 - the page being controlled
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Page 1: streamingpage</title>
<style>
#overlay{display:block}
</style>
</head>
<body>
<div id='overlay'>
<div id='textContainer'>
<!--<iframe src='https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true' width='640' height='415' frameborder='0' marginheight='0' marginwidth='0'>Laden…</iframe>-->
IFRAME CONTENT - docs.google.com
</div>
</div>
<!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
VIDEO-YouTUBE
<script>
const getStyle=(n,css)=>{
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
}
let oChan=new BroadcastChannel( 'tabs' );
oChan.addEventListener('message',(e)=>{
//inspect messages as they arrive
console.log( e.data );
let div=document.getElementById('overlay');
div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block';
});
</script>
</body>
</html>
Page 2 - the page doing the controlling
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>page2: controller</title>
<style>
#overlay{display:block}
</style>
</head>
<body>
<div id='overlay'>
<div id='textContainer'>Test tekst whatever </div>
</div>
<div>
<button id='toggler'>Click here to turn ON</button>
</div>
<!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
VIDEO-YouTUBE
<script>
const getStyle=(n,css)=>{
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
}
let oChan=new BroadcastChannel( 'tabs' );
sendmessage=function( data ){
oChan.postMessage( { 'data':data } )
};
let bttn=document.querySelector('button#toggler');
bttn.addEventListener('click',e=>{
let div=document.getElementById('overlay');
div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block'
/*
send a message - the payload can be tailored to suit your needs and processed within the listener on page 1
this simply sends the `display` status of the local DIV but you can send whatever is meaningful/helpful.
*/
sendmessage( { state:getStyle(div,'display') } );
});
</script>
</body>
</html>
If a user already has one video selected (using the drop-down), and they select another, I would like the first video to be replaced with the new video. Instead, how I have it set up right now, it is just appending the second video (or even third, if a third video is selected) after the first. How do I change my code to clear any current videos from the page before loading the new video?
<body>
<h1>Let's Meditate.</h1>
<select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twenty">20 minutes</option>
<option value="fifteen">15 minutes</option>
<option value="ten">10 minutes</option>
<option value="five">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
<button onclick="refresh();">Refresh</button>
<div class="videos">
<iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
function meditate() {
var timer = document.getElementById("timer").value;
if(timer == "twenty") {
document.getElementById("twentyMinVid").style.display = "block";
} else if(timer == "fifteen") {
document.getElementById("fifteenMinVid").style.display = "block";
} else if(timer == "ten") {
document.getElementById("tenMinVid").style.display = "block";
} else if(timer == "five") {
document.getElementById("fiveMinVid").style.display = "block";
} else {
document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
}
}
function refresh() {
location.reload();
}
</script>
</body>
Instead of making there display: block, try changing the iframe src.
<body>
<h1>Let's Meditate.</h1>
<select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twenty">20 minutes</option>
<option value="fifteen">15 minutes</option>
<option value="ten">10 minutes</option>
<option value="five">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
<button onclick="refresh();">Refresh</button>
<div class="videos">
<iframe id="iframe" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
function meditate() {
var timer = document.getElementById("timer").value;
var iframe = document.getElementById("iframe");
if(timer == "twenty") {
iframe.src = "https://www.youtube.com/embed/VjxGjDo1tWA";
} else if(timer == "fifteen") {
iframe.src = "https://www.youtube.com/embed/aIIEI33EUqI";
} else if(timer == "ten") {
iframe.src = "https://www.youtube.com/embed/Xl_B45DpMLU";
} else if(timer == "five") {
iframe.src = "https://www.youtube.com/embed/3RxXiFgkxGc";
} else {
document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
}
}
function refresh() {
location.reload();
}
</script>
Here is my solution I modified your code a bit.
<body>
<h1>Let's Meditate.</h1>
<select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twentyMinVid">20 minutes</option>
<option value="fifteenMinVid">15 minutes</option>
<option value="tenMinVid">10 minutes</option>
<option value="fiveMinVid">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
<button onclick="refresh();">Refresh</button>
<div class="videos">
<iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
function meditate() {
var timer = document.getElementById("timer").value;
if (timer === 'select') {
alert("Please select a time limit and click Go.");
return;
}
var options = document.getElementById("timer").options;
for (var i = 1; i < options.length; i++) {
if (options[i].value === timer) {
document.getElementById(timer).style.display = "block";
} else {
document.getElementById(options[i].value).style.display = "none";
}
}
}
function refresh() {
location.reload();
}
</script>
</body>
I tried to make it more generic so that if you add more option in dropdown then if dropdown value is same as frameId then no modification is needed in the logic to show/hide videos
link to fiddle
This is because you are not hiding the existing iframes when you display the new one.
For example, in this block:
if(timer == "twenty") {
document.getElementById("twentyMinVid").style.display = "block";
//Add code here for hiding the other divs
document.getElementById("fifteenMinVid").style.display = "none";
document.getElementById("tenMinVid").style.display = "none";
document.getElementById("fiveMinVid").style.display = "none";
}
....You need to do this same thing in other sections so that you are hiding other divs while you show the correct div.
I use this script code.
How can I modify my script?
<div class="video-slider">
<div>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/-xmdWsgmeXk?playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/-xmdWsgmeXk?playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/-xmdWsgmeXk?playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<script>
var slider = $(".video-slider").bxSlider({
pager : false
onSlideBefore : function($slideElement, oldIndex, newIndex) {
var src = $slideElement.find("iframe").attr("src");
console.log(src);
$("iframe").attr("src",'').attr("src",src);
}
});
</script>
The video address is for samples. Let me know if there is a good way.
I think you not write proper javascript for bxslider check my code.
<script>
var slider = $(".video-slider").bxSlider({
pager : false,
onSlideBefore : function($slideElement, oldIndex, newIndex) {
var src = $slideElement.find("iframe").attr("src");
console.log(src);
$("iframe").attr("src",'').attr("src",src);
}
});
</script>
HTML
<div class="blog-post">
<div class="blog-image">
<img src="img/featured-img.jpg"/>
</div>
<div class="blog-details">
<h3>Post Title Here</h3>
<ul class="blog-meta">
<li>Date</li>
<li>Author</li>
</ul>
<div class="blog-excerpt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yH4zLmi_6n0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
and i used the following js
function iframe_posts() {
var video_url = $(".blog-details").find("iframe").attr("src");
$(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
}
}
iframe_posts();
By this code Image replacing with iframe but same iframe showing in every "blog-post". I want to show the parent video only for each "blog-post". Suppose i have 2 blog-post with 2 different iframe. Now i want to show the iframe in
are
Anyone can help me please.
You have to deal with individual instances by looping over repeating elements
Can do this numerous ways but I would start at the top level repeating containers ... class=blog-post
$('.blog-post').each(function(){
// `this` is current instance of `blog-post`
var $post = $(this);
// use `find()` to look inside this `$post` instance
var video_url = $post.find('iframe').attr('src');
$post.find('.blog-image').html('....');
});
Try this code
function iframe_posts() {
var video_url = $(".blog-details").find("iframe").attr("src");
$(".blog-excerpt").hide();
$(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
}
$(".blog-post").each(function(){
var wrapper = $(this);
var video_url = wrapper.find("iframe").attr("src");
var iframe_content = ('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
var video_div = wrapper.find(".blog-image")
video_div.each(function(){
video_div.html(iframe_content);
});
});
This code resolved my problem..
I made a function, so when you click on a link 'Play', div with black background changes to iframe video. It seems to be working fine. Problem is, that I want to add multiple play links with multiple videos. I don't know how to do it, so when you click on second play link, video changes from first video to second in the same place.
my code:
<script>
var toggle = function() {
var mydiv = document.getElementById('videoholder');document.getElementById("frame").src="http://www.youtube.com/embed/YuOBzWF0Aws";
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
</script>
PLAY<br>
<div style="width:560px; height:315px; background-color:#111111;">
<div id="videoholder" style="display:none;">
<iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div></div>
You could try something like this.
<script>
function toggle(url) {
var mydiv = document.getElementById('videoholder');
document.getElementById("frame").src = url;
if (mydiv.style.display === 'block' || mydiv.style.display === '') {
mydiv.style.display = 'none';
} else {
mydiv.style.display = 'block'
}
}
</script>
PLAY 1<br>
PLAY 2<br>
<div style="width:560px; height:315px; background-color:#111111;">
<div id="videoholder" style="display:none;">
<iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div></div>
You could use document.getElementById('frame').src='http://linktonewvideo.com';
Hope this helps!