I have a client who built their site with wpbakery and on their posts are using video player. They want to have it so when the video plays the nav bar disappears. In the inspector I can see that the player has a class of 'video-container' and when the video is playing there is an addition class of 'playing'. I am hoping to check for if video-container has playing then add a class to my nav.
var hideNav = document.getElementsByClassName('video-container playing');
if (hideNav) {
document.getElementByClassName("nav").className = "hidden";
}
I am guessing I need to add an event listener and I am not sure if my hideNav variable is working how I want it to.
Here's an answer that doesn't use jQuery:
const videoEl = document.getElementById('video')
const navbarEl = document.getElementById('navbar')
videoEl.addEventListener('play', () => {
navbarEl.classList.add('hidden')
})
videoEl.addEventListener('pause', () => {
navbarEl.classList.remove('hidden')
})
.hidden {
display: none;
}
<div style="padding: 30px 10px; width: 100%; background: gray; margin-bottom: 20px;" id="navbar">
Navbar
</div>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" id="video" controls width="400" />
Related
I have a div container with several images. I want the user to select an image (avatar) from the provided list. Then the avatar image will be uploaded and also accessible. Once the user selects the avatar, I want to save the location of the selected avatar to my database. What is the best way to select the image? Is there any easy way to do this?
HTML
<div class="image-container">
<img src="images/gorillaAvatars/brownGorilla.png" id="brownGorilla">
<img src="images/gorillaAvatars/gorilla.png" id="Gorilla">
<img src="images/gorillaAvatars/greenGorilla.png" id="greenGorilla">
<img src="images/gorillaAvatars/kidGorilla.png" id="kidGorilla">
<img src="images/gorillaAvatars/surpriseGorilla.png" id="surpriseGorilla">
</div>
CSS
<style>
.image-container{
width:60%;
border: solid magenta 1px;
padding: 5px;
margin: 30px;
display: flex;
justify-content: space-evenly;
}
img{
width:80px;
}
img:hover,
img:focus,
img:active{
background-color: blue;
border-radius: 20px;
}
<style>
Javascript
const brownGorillaAvatar = "https://brownGorilla.png";
const mainGorillaAvatar ="https://gorilla.png"
const greenGorillaAvatar ="https://greenGorilla.png"
const kidGorillaAvatar ="https://kidGorilla.png"
const surpriseGorillaAvatar ="https://surpriseGorilla.png"
const avatar = [brownGorillaAvatar,mainGorillaAvatar,greenGorillaAvatar,kidGorillaAvatar, surpriseGorillaAvatar]
brownG.addEventListener('click', avatarSelect);
bigG.addEventListener('click', avatarSelect1);
greenG.addEventListener('click', avatarSelect2);
kidG.addEventListener('click', avatarSelect3);
surpG.addEventListener('click', avatarSelect4);
function avatarSelect (){
console.log(avatar[0])
}
function avatarSelect1 (){
console.log(avatar[1])
}
function avatarSelect2 (){
console.log(avatar[2])
}
function avatarSelect3 (){
console.log(avatar[3])
}
function avatarSelect4 (){
console.log(avatar[4])
}
Rather than attaching an event to each image object, it would be better to attach an event to the container surrounding it.
You can avoid overlapping codes and respond flexibly even if image objects increase.
for example
const imageContainer = document.getElementById("image-container");
imageContainer.onclick = function(e) {
console.log(e.target.id); // you can get img tag's id
}
Have a look at how Event Bubbling and delegation work in javascript to get a better understanding but you want to add the event to the parent container not to each element. So by adding new elements to your array they will be clickable.
const avatars = [
'brownGorillaAvatar',
'mainGorillaAvatar',
'greenGorillaAvatar',
'kidGorillaAvatar',
'surpriseGorillaAvatar'
]
const avatarContainer = document.querySelector('#avatarContainer');
avatars.forEach((avatar) => {
const span = document.createElement('span');
span.innerHTML = avatar;
avatarContainer.appendChild(span);
})
avatarContainer.addEventListener('click', (evt) => {
console.log(evt.target);
})
<html>
<head></head>
<body>
<section id="avatarContainer">
</section>
</body>
</html>
I am fairly new to HTML5 and Javascript. I have only created simple websites so I apologize in advance for my limited knowledge. A friend needs some help and I offered to take a crack at it.
The concept is simple enough:
-Have a button that will adjust the position of a video up or down.
-The video should be contained inside a window. The window will hold a smaller resolution compared to the video, in order to hide the rest of the video and only reveal the portion within the window.
Reference images to help illustrate the idea are below (I can only post 2):
Ref-Button1
Ref-Button2
Is this possible?
Through researching, I am under the impression that a moveable div or possibly a canvas might be the right approach.
So far, all of my attempts are failing. I don't think it will help much, but an example of my script is also provided if needed.
Any insight is greatly appreciated.
<style>
body {
background-color: Grey
color: #CCCCCC;
}
#videoWindow {
width: 720px;
height: 350px;
margin-left: 400px;
margin-right: 400px;
border: 7px solid #0F0F0F;
border-radius: 5px;
}
#videoControls {
margin-left: 400px;
margin-right: 400px;
position: fixed;
background-color: #FFFFFF;
width: 400px;
height: 250px;
}
#videoManip {
width: 720px;
height: 350px;
}
</style>
<body>
<div>
<!--Video Window (Static)-->
<div id="videoWindow" class="videoWindow">
<!--Video Re-Positioner-->
<div id="videoManip" class="videoManip">
<!--Video-->
<video id="video" width="720" height="1050">
<source src="Videos/VideoPlayerTest.mp4" type="video/mp4">
</div>
<!--VideoPositionControls-->
<div class=""><!--SetClass-->
<!--Button1-->
<input type="button" id="button1" value="Button1">
<!--Button2-->
<input type="button" id="button2" value="Button2">
<!--Button3-->
<input type="button" id="button3" value="Button3">
</div>
</div>
</body>
<script>
//Video
var video = document.getElementById("video");
//VideoPositionControls
var Btn1 = document.getElementById("button1");
var Btn2 = document.getElementById("button2");
var Btn3 = document.getElementById("button3");
//Event Listener: Video Position Controls
//Update Video Position for 'Cam1'
Btn1.addEventListener("click", function() {
video.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC(0,0)
//Update Video Position for 'Cam2'
Btn2.addEventListener("click", function() {
video.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC(0,350)
//Update Video Position for 'Cam3'
Btn3.addEventListener("click", function() {
video.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC(0,-350)
</script>
The most easy way to do that is to just move video vertically inside its parent.
Addition to CSS:
#videoManip {
overflow: hidden;
}
#video {
position: relative;
}
Addition to javascript:
Btn1.addEventListener("click", function() {
video.style.top = 0;
});
Btn2.addEventListener("click", function() {
video.style.top = '-350px';
});
Btn3.addEventListener("click", function() {
video.style.top = '-700px';
});
Here is tiny jsfiddle illustrating that: https://jsfiddle.net/iStyx/ocgx6pdL/
You could use JQuery to achieve that.
First define two buttons with an onclick event.
<div id="videoControls">
<button id="move-up" onclick="move(0,1)">Up</button>
<button id="move-down" onclick="move(0,-1)">Down</button>
</div>
The following code handles the actual positioning with jquery. The function move takes 2 parameters x and y for the number of pixels the video should move along the axis. In this example it uses margin for positioning. You should check if it's good with your use-case.
const STEP = 10;
const VIDEO_ID="video";
function move(x,y){
var valx = "+="+(STEP*x)+"px";
var valy = "+="+(STEP*y)+"px";
$(VIDEO_ID).css( 'margin-top', valy );
$(VIDEO_ID).css( 'margin-left', valx );
}
I have made a customised audio player, but the problem is that I can only have one player in each HTML page. Because so since the js code is associated to for example class .playthen if there are 2 .play classes on the page, both work. While the only one that is pressed is supposed to work. Here is a very simplified version of the player. I know this example can be solved by using this in some part of the code, but imagine it is a full plugin with lots of functionalities.
(function($) {
var audio, src;
src = $(".player").attr("data-src");
audio = new Audio();
audio.src = src;
$(".play").on("click", function() {
if (audio.paused) {
audio.play();
$(".play").css("background", "url(https://goo.gl/w4q23U) no-repeat");
} else {
audio.pause();
$(".play").css("background", "url(https://goo.gl/xOkUZm) no-repeat");
}
});
})(jQuery);
div.player{
width:200px;
height:50px;
border:dashed 1px black;
margin:5px;
}
div.player > .play {
width: 48px;
height: 48px;
background: url(https://goo.gl/xOkUZm) no-repeat;
float:left;
}
div.player > .title{
line-height:50px;
margin-left:60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="player" data-src="https://goo.gl/aBJE48">
<div class="play"></div>
<div class="title">track 1</div>
</div>
<div class="player" data-src="https://goo.gl/4arvDT">
<div class="play"></div>
<div class="title">track 2</div>
</div>
As you can see, if you press button to play, both icons works, while only the one that is pressed is supposed to work. I am looking for a proper solution for having various instances of the same plugin in a single page.
There are similar question with this title, but the point of this question is considering the audio object which the page can only play one of them, no matter if there is one instance of the player of multiple.
Pass a "target" for your CSS and also push each instance into an array so you can call methods on them using index position. Then the controls will apply to the instance you have selected.
(function($) {
var player = [];
var audio, src;
src = $(".player").attr("data-src");
audio = new Audio();
audio.src = src;
player.push(audio);
$(".play").on("click", function(target) {
$.each( player, function( key, value ) {
if (audio[key].paused() {
audio[key].play();
$(target).css("background", "url(https://goo.gl/w4q23U) no-repeat");
} else {
audio[key].pause();
$(target).css("background", "url(https://goo.gl/xOkUZm) no-repeat");
}
});
});
})(jQuery);
I am trying to make a custom music player without using the "controls" tag inside the audio tag. First of all, I want to create something similar to the SCM Music Player. I won't use the one provided by SCM, because it somehow uses a large amount of space when added to my website, I haven't figured out how to hide/show it since it is all within a script tag, and it really has an impact on the Y-Slow speed.
Here is an image of what I would like to create:
And this is what I have so far: https://jsfiddle.net/e13gs8qg/6/ (Updated)
HTML: (Updated)
<audio id="player" class="mediaplayerclass">
<source title="Fruity Loops Own Track Copy" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3" />
<source title="Fruity Loops Own Track Copy 2" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3" />
</audio>
<div class="playermenuwrapper">
<button id="previoussong" class="previoussongclass">
Previous
</button>
<button id="playpause" class="playpauseclass">
play
</button>
<button id="nextsong" class="nextsongclass">
Next
</button>
<div id="songtitle" class="titleclass"></div>
</div>
CSS:
.playermenuwrapper {
text-align:center;
margin: 0px auto;
max-width:100%;
}
.previoussongclass {
display:inline-block;
width:80px;
}
.playpauseclass {
display:inline-block;
width:80px;
}
.nextsongclass {
display:inline-block;
width:80px;
}
.mediaplayerclass {
display:block;
width:150px;
height:50px;
margin: 0px auto;
}
.titleclass {
display:inline-block;
text-align:center;
margin: 0px auto;
width:250px;
}
JS: (Updated)
window.player = document.getElementById('player');
var playpause = document.getElementById('playpause');
var songtitle = document.getElementById('songtitle');
changesongtitle();
player.volume = 0.3;
playpause.onclick = function () {
if (player.paused) {
changesongtitle();
player.play();
playpause.innerHTML = 'pause';
} else {
player.pause();
playpause.innerHTML = 'play';
changesongtitle();
}
}
function changesongtitle() {
var songtitle = document.getElementById('songtitle');
if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3") {
songtitle.innerHTML = "Fruity Loops Own Track Copy";
}
if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3") {
songtitle.innerHTML = "Fruity Loops Own Track Copy 2";
}
}
I have looked at many questions on stackoverflow on this, but I still haven't found answers to what I'm trying to do.
How can I retrieve the title of the playing source file? (Updated)
How can I code the "left" and "right" buttons to change the source files?
How can I create a volume slider?
How can I create a timeline of the current duration of the audio being played?
And lastly, how can I display current time and the full duration of the audio being played?
How to use currentTime and duration properties in this.
What I understand is you want to build a custom library for your specific use case. I would suggest you to try out Mediaelement.js. It has a lot of features and also it works on almost all browsers. Also, few things like changing songs based on next and prev can be added on top of this library as this library is open source.
Even I have used it and created some custom features on top of it. https://github.com/hkasera/mediaelement-markers
But before all this you need to understand how HTML5 audio or video works. For that I would suggest you to read the following articles :
http://html5doctor.com/html5-audio-the-state-of-play/
http://www.html5rocks.com/en/tutorials/webaudio/intro/
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Cross-browser_audio_basics
How do I link to snapshots of embedded flash videos instead of the actual flash videos to reduce loading times of a site?
Yes, and in fact this is a method that is often employed. You start with an image with a play button overlay. When it's clicked, the image element is replaced with a flash element that plays the video.
Perhaps something like the following:
<script>
$(function () {
$("img.thumbnail").click(function (e) {
$(e.parentNode).addClass("play");
});
});
</script>
<style>
.toggler .player { display: none; }
.toggler.play .player { display: block }
.toggler.play .thumbnail { display: none }
</style>
<div class="toggler">
<img class="thumbnail" src="thumbnail.jpg">
<div class="player">
<!-- embed your player here -->
</div>
</div>