I have been searching Stackoverflow and Google, and tried everything I clould think of to figure out how to loop through an html file with javascript and find all of the video files, and their unique ID, but I cant seem to get it right. I have not been coding in several years, so I am very rusty and most of my experience is with back end code. I have very little experience with DOM and Javascipt, I am sure what ever I have tried, I have probably screwed up the syntax/semantics.
What the code does:
The Javascript makes videos pop up and play in a modal window, however since it is hard coded, I can only input one unique ID, and when you click on each of the videos on the web page, of course, they play the same video.
Hope someone can help, this is a personal project for my game collection and the only thing I have left to complete is this last piece of code. Thanks in advance for any assistance.
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
function lightbox_open() {
var lightBoxVideo = document.getElementById("Some-ID-Variable");
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function lightbox_close() {
var lightBoxVideo = document.getElementById("Some-ID-Variable");
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
<!--Here is the HTML I have, I am only showing 2 game titles in the example, but this code repeats for every game in my collection:-->
<div class="containers">
<!--Begin .container-->
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="MyVideo" width="600" controls>
<source src="videos/game-title-1-trailer.mp4" type="video/mp4">
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<img class="title-image" src="images/placeholder.jpg" alt="Some Title">
<br>
<span class="title-text">Game Title 1</span>
<br>
<ul>
<li>Comfort: Intense</li>
<li>Learning Curve: Intermediate</li>
</ul>
<br>
<p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
<br>
</div>
</div>
<!--End .container-->
<div class="containers">
<!--Begin .container-->
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="MyVideo" width="600" controls>
<source src="videos/game-title-trailer-2.mp4" type="video/mp4">
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<img class="title-image" src="images/placeholder.jpg" alt="Some Title">
<br>
<span class="title-text">Game Title 2</span>
<br>
<ul>
<li>Comfort: Intense</li>
<li>Learning Curve: Intermediate</li>
</ul>
<br>
<p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
<br>
</div>
</div>
Like James said, document.querySelectorAll('video') will get every video tag on the page, but if I understand your question correctly, you want to find a specific ID and play it when it's chosen. Looping is probably an inefficient way to do that, especially if you have many videos.
Perhaps you can try putting a variable in your onclick, like onclick="lightbox_open('1')", then in that function you can do:
function lightbox_open(idNum) {
var lightBoxVideo = document.getElementById("Some-ID-Variable" + idNum);
//...
}
Then if you're building more possible videos from the backend, you can just increment that variable when you set each element's onclick attribute.
Related
How to implement Video Quality selctor for dash.js?
Html Code:
<script src="https://reference.dashif.org/dash.js/latest/dist/dash.all.debug.js"></script>
<video data-dashjs-player autoplay width="100%" height="450" src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" controls="true"></video>
NOTE : THE MPEG DASH FILE HAS MULTIPLE BITRATES [1080P , 720P , etc....]
like this:
Please anyone with knowledge in dash.js help me to solve this
The dash.js reference player actually has this built in - see a screen shot below:
The above is at https://reference.dashif.org/dash.js/nightly/samples/dash-if-reference-player/index.html and the code is here: https://github.com/Dash-Industry-Forum/dash.js
The section of interest to you will likely be 'contrib/akamai/controlbar/ControlBar.js' - if you search for 'bitrateListBtn' in this file you can see how the button is set up and the listeners etc.
The relevant HTML5 is at: dash.js/contrib/akamai/controlbar/snippet.html - you can see how the bit rate button is set up as part of the video controller:
<div id="videoController" class="video-controller unselectable">
<div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
<span id="iconPlayPause" class="icon-play"></span>
</div>
<span id="videoTime" class="time-display">00:00:00</span>
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
<span class="icon-fullscreen-enter"></span>
</div>
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
<span class="icon-bitrate"></span>
</div>
<input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
<div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
<span id="iconMute" class="icon-mute-off"></span>
</div>
.
.
.
I'm helping a student with their work, and we have a mute button working using IDs, but of course that only mutes one thing at a time. We want to be able to shut off ALL audio playing at once. If I try to use anything other than getElementById in my script, it just breaks and doesn't mute at all. For example, using "getElementbyClassName("soundsnip")" doesn't mute anything. The only thing successfully working is muting one thing only with "getElementById". Can anyone help us be able to mute all of these elements with one button?
Here's the working code we have now, muting only one element:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">+</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">white noise
<br>
<br>
<audio loop controls class="soundsnip" id="white1">
<source src="whitenoise.wav" type="audio/wav"></audio></a>
<a href="#">mic rubbing
<br>
<br>
<audio loop controls class="soundsnip" id="mic1">
<source src="micrub.wav" type="audio/wav"></audio></a>
<a href="#">mic scratching
<br>
<br>
<audio loop controls class="soundsnip" id="scratch1">
<source src="micscratch.wav" type="audio/wav"></audio></a>
</div>
</div>
<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>
<script>
var aud = document.getElementById("white1");
function enableMute() {
aud.muted = true;
}
function disableMute() {
aud.muted = false;
}
function checkMute() {
alert(aud.muted);
}
</script>
Here's working example, it will mute all audio on button click:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">+</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">white noise
<br>
<br>
<audio loop controls class="soundsnip" id="white1">
<source src="https://www.milannohejl.cz/subdom/codepen/Shantifax-WeAreAllOne.mp3" type="audio/wav"></audio></a>
<a href="#">mic rubbing
<br>
<br>
<audio loop controls class="soundsnip" id="mic1">
<source src="https://www.milannohejl.cz/subdom/codepen/Shantifax-WeAreAllOne.mp3" type="audio/wav"></audio></a>
<a href="#">mic scratching
<br>
<br>
<audio loop controls class="soundsnip" id="scratch1">
<source src="https://www.milannohejl.cz/subdom/codepen/Shantifax-WeAreAllOne.mp3" type="audio/wav"></audio></a>
</div>
</div>
<button type="button" id="mute-button">Mute sound</button>
<button type="button" id="unmute-button">Enable sound</button>
<script>
$(document).ready(function() {
/*** Mute all ***/
$('#mute-button').on('click', function() {
/*** Mute all video and audio on page ***/
$('body video, body audio').each(function() {
/*** Do it here globally ***/
$(this).prop('muted', true);
});
});
/*** UnMute all ***/
$('#unmute-button').on('click', function() {
/*** Un Mute all video and audio on page ***/
$('body video, body audio').each(function() {
/*** Do it here globally ***/
$(this).prop('muted', false);
});
});
});
</script>
First, select all the audio elements, with document.querySelectorAll(). Then, loop over them. Try something like this.
for (audioEl of document.querySelectorAll('audio')) {
audioEl.muted = true;
}
As an alternative, you could connect these to a Web Audio API graph and use a GainNode.
I have a page setup with links that hide/show divs. The last link is a contact form. Contact forms are super messy with code so I wanted to load the file externally
I found many snippets on simply loading html into div with jquery. But the issue is I already have jquery setup to show and hide the divs
How can I have the contact link show the contact div and also load the external contact form into it?
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function(){
var $menu = $(this);
if (!$menu.is($clicked))
{
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
$(".contactmenu").click(function(){
$("#menu-contact").load("contactform.htm");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
Home
Videos
Follow
Contact
</div>
</header>
<article>
<div id="bodycontent">
<div id="menu-contact" style="display: none">Contact</div>
<div id="menu-follow" style="display: none">Follow</div>
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<div id="menu-home" style="display: none">..</div>
</div>
</article>
contactmenu class doesn't exist, try:
$("#contact-menu-item").click(function(){
I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.
I have two audio tags in these markup. my problem is that the second one won't play
<div class="container">
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/02 So Far.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/track3.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
</div>
And here is the script that plays the track
$(".play-bt").click(function(){
var $artItem = $(this).parent(".art-item");
console.log($artItem);
$artItem.find('audio').play();
$artItem.find(".message").text("Music started");
});
My problem is that I can only play the first audio tag. what can I do to play the second tag or 3rd audio tag if there's more? the counter is the one that is selecting what audio tags to play. but as of now I have no idea how would I make the second audio tag or user selected audio tag if the are more audio post in this markup.
not 100% sure that's the only issue but you use id a lot. id's should be unique on a page. Replace them by classes
And your references are wrong.
$("#play-bt").click(function(){
// -> will allways try to play song indicated by counter (0)
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
I don't think you want that? Don't you want to play the audio in the "post-container" ?
you could do something like this:
$(document).ready(function(){
$(".play-bt").click(function(){
var $post= $(this).parents(".post-container");
$post.find('audio')[0].play();
$post.find(".message").text("Music started");
});
});
=> and changing the play-bt and message id's into classes
The reason why things don't work for you is because of your markup... in your code you try to obtain "parent" of the clicked "play-bt" class, yet "art-item" is NOT parent in your DOM structure. What probably makes you think it is, is your incorrect markup indentation...