Develop Reference

html5 custom control not work if multiple video

I'm trying to make a custom video player. Unfortunately, I have an issue to set the control to all videos. The control button is working well, but only on the first video. I would like to make it without adding all video unique IDs. Is that even possible?
Here is my code:
const video = document.querySelector('.video');
const btn = document.getElementById('play-pause');
const sound = document.getElementById('volume');
sound.addEventListener('click', ()=>{
video.muted = !video.muted;
sound.classList.toggle('mute');
});
btn.addEventListener('click', ()=>{
video.paused ? video.play() : video.pause();
btn.classList.toggle('pause');
});
.container {
background:#ccc;
justify-content:center;
align-items:center;
/* height:100vh; */
flex-direction:column;
}
.c-mst-video-container , .video {
width:100%;
}
.mst-video-container {
max-width:800px;
position:relative;
overflow:hidden;
display:block;
}
.mst-video-container:hover .controls {
transform: translateY(0);
}
.mst-video-control {
display:flex;
position:absolute;
bottom:0;
width:100%;
flex-wrap:wrap;
background-color: black;
}
.mst-video-btn button {
background:none;
border:0;
outline:0;
cursor:pointer;
}
.mst-video-btn #play-pause:before {
content: '\f144';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn #volume:before {
content: '\f028';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn {
padding:10px;
}
.mst-video-btn #play-pause.play:before {
content:'\f144';
}
.mst-video-btn #play-pause.pause:before {
content:'\f28b';
}
.mst-video-btn #volume.sound:before {
content:'\f028';
}
.mst-video-btn #volume.mute:before {
content:'\f6a9';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button id="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button id="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
</div>
Thanks for the advice.
Best regards

Use a class .play-pause instead than #play-pause and attach a listener to all the buttons. Furthermore, when a button is clicked you have to select the video and you have to navigate and I used closest() to select the container of the btn clicked and querySelector not on the document but on this container to select the .video child. e.target return the btn clicked, in this case you can't use this because you are using an arrow function. I modified the css too transforming the id #play-pause in a class.
const video = document.querySelector('.video');
const btns = document.querySelectorAll('.play-pause');
const sound = document.getElementById('volume');
sound.addEventListener('click', ()=>{
video.muted = !video.muted;
sound.classList.toggle('mute');
});
for(const btn of btns){
btn.addEventListener('click', (e)=>{
const currentBtn = e.target;
const videoContainer = currentBtn.closest(".mst-video-container")
const videoParent = videoContainer.querySelector(".video");
videoParent.paused ? videoParent.play() : videoParent.pause();
currentBtn.classList.toggle('pause');
});
}
.container {
background:#ccc;
justify-content:center;
align-items:center;
/* height:100vh; */
flex-direction:column;
}
.c-mst-video-container , .video {
width:100%;
}
.mst-video-container {
max-width:800px;
position:relative;
overflow:hidden;
display:block;
}
.mst-video-container:hover .controls {
transform: translateY(0);
}
.mst-video-control {
display:flex;
position:absolute;
bottom:0;
width:100%;
flex-wrap:wrap;
background-color: black;
}
.mst-video-btn button {
background:none;
border:0;
outline:0;
cursor:pointer;
}
.mst-video-btn .play-pause:before {
content: '\f144';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn #volume:before {
content: '\f028';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn {
padding:10px;
}
.mst-video-btn .play-pause.play:before {
content:'\f144';
}
.mst-video-btn .play-pause.pause:before {
content:'\f28b';
}
.mst-video-btn #volume.sound:before {
content:'\f028';
}
.mst-video-btn #volume.mute:before {
content:'\f6a9';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button class="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button class="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
</div>

Connect svg rect with an accordion

I have a svg image with a mouse hover on four rect elements and an accordion with four buttons done with javascript. I want to connect each element by hovering them simultaneously (a rect and button accordion) and by clicking on a svg rect it will open a button accordion and by clicking on an accordion it will fill a rect. You can check my fiddle here: https://jsfiddle.net/pfrutuoso/zcsj8g05/2/
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="stage_info">
<button class="accordion">Stage 1</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 2</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 3</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 4</button>
<div class="panel">
<p>Information here..</p>
</div>
</div>
<div class="stage_img">
<map id="big_stage">
<svg version="1.1" id="stadium" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 456.122 451.02" enable-background="new 0 0 456.122 451.02"
xml:space="preserve">
<rect id="stage4" x="25.51" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage3" x="230.612" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage2" x="25.51" y="229.592" fill="#1C6131" width="200" height="200"/>
<rect id="stage1" x="230.612" y="229.592" fill="#1C6131" width="200" height="200"/>
</svg>
</map>
</div>
</div>
</body>
</html>
My css:
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.wrapper {
display: inline-block;
max-width: 1140px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.stage_info,
.stage_img {
display: inline-block;
width: calc(50% - 80px);
vertical-align: top;
}
rect {
cursor: pointer;
z-index: 999;
position: relative;
}
rect:hover {
fill: #ccc;
pointer-events: all;
}
And my javascript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}

I tried to do it as procedurally as possible as that seemed to be what you were going for in your JS.
I added value attributes to your stage buttons with the id of the corresponding rect elements, and I added a class called grey with the same properties as those applied when hovering.
let stgInf = document.querySelector(".stage_info");
let svg = document.querySelector("#stadium");
function onClick(num) {
let acc = stgInf.querySelector(`.accordion:nth-of-type(${num})`);
let panel = acc.nextElementSibling;
let rect = svg.querySelector(`rect#${acc.getAttribute("value")}`);
return () => {
acc.classList.toggle("active");
if (acc.classList.contains("active")) {
panel.style.display = "block";
rect.classList.add("grey");
} else {
panel.style.display = "none";
rect.classList.remove("grey");
}
}
}
function hover(num) {
let acc = stgInf.querySelector(`.accordion:nth-of-type(${num})`);
let rect = svg.querySelector(`rect#${acc.getAttribute("value")}`);
return (event) => {
if (event.type === "mouseenter") {
acc.classList.add("grey");
rect.classList.add("grey");
} else if (!acc.classList.contains("active")) {
acc.classList.remove("grey");
rect.classList.remove("grey");
}
}
}
let accs = stgInf.querySelectorAll(".accordion");
let i = 1;
for (let acc of accs) {
let rect = svg.querySelector(`rect#${acc.getAttribute("value")}`);
acc.addEventListener("click", onClick(i));
acc.addEventListener("mouseenter", hover(i));
acc.addEventListener("mouseout", hover(i));
rect.addEventListener("click", onClick(i));
rect.addEventListener("mouseenter", hover(i));
rect.addEventListener("mouseout", hover(i));
++i;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.wrapper {
display: inline-block;
max-width: 1140px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.stage_info,
.stage_img {
display: inline-block;
width: calc(50% - 80px);
vertical-align: top;
}
rect {
cursor: pointer;
z-index: 999;
position: relative;
}
.grey,
.active,
.accordion:hover,
rect:hover {
fill: #ccc;
background-color: #ccc;
pointer-events: all;
}
<div class="wrapper">
<div class="stage_info">
<button class="accordion" value="stage1">Stage 1</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion" value="stage2">Stage 2</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion" value="stage3">Stage 3</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion" value="stage4">Stage 4</button>
<div class="panel">
<p>Information here..</p>
</div>
</div>
<div class="stage_img">
<map id="big_stage">
<svg version="1.1" id="stadium" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 456.122 451.02" enable-background="new 0 0 456.122 451.02"
xml:space="preserve">
<rect id="stage4" x="25.51" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage3" x="230.612" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage2" x="25.51" y="229.592" fill="#1C6131" width="200" height="200"/>
<rect id="stage1" x="230.612" y="229.592" fill="#1C6131" width="200" height="200"/>
</svg>
</map>
</div>
</div>
EDIT
I implemented the hover functionality you mentioned in your comment by adding mouseenter and mouseout event listeners in addition to the click listeners.

How to get rid of border in css3

I've been working on a code and for some reason when you hover over the rain and beach icon there's a blue square border that I don't recall adding, how do I remove it? It also pops up when I hover over the other buttons.
I will appreciate anyone's help. Btw I'm following a tutorial from devEd
THANKS, Love2Code
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<svg class="play"
width="90" height="90" viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/>
</svg>
<svg class="track-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".player-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
song.play();
});
};
app();
</script>
</html>

Use border: none!important, this forces the browser to use this code.

I've inspected your code and when i click, there is indeed an outline but if you select your button, add the :active and then set outline to none, it works for me.
.sound-picker:focus{
outline: none;
}
It might even work with just
.sound-picker{
outline: none;
}
but I haven't tested that one out

In your css, add this to the visited, focus, hover and active psuedoclasses:
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

If you want to remove elements borders when them get focused, you can do this:
* {
border: none !important;
outline: none !important
}
Tell me this resolves your problem or not.
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
* {
outline: none !important;
border: none !important;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<svg class="play"
width="90" height="90" viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/>
</svg>
<svg class="track-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".player-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
song.play();
});
};
app();
</script>
</html>

Getting audio to start after you click on the play button

What would I change in the code if I didn't want the audio to start after you clicked on it. If I wanted the play button to show, and not pause, with no audio playing until you clicked on the play button and not the picture?
How it looks now after you Click on the image. It goes straight to the audio. I want it to go to the play button first.
https://jsfiddle.net/7ux1s23j/42/
I want it to go to this image first after you click on the picture.
Screenshot
<style>
.playButton {
width: 266px;
height: 174px;
}
.initial {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.playButton.playing {
width: 50px;
height: 50px;
border: none;
cursor: pointer;
background-color: #000000;
margin: -112px 0 0 108px;
fill: #aaff00;
}
.links div {
margin: 0 0 12px 0;
}
.links a {
display: block;
width: 50px;
height: 50px;
background-color: green;
margin: -50px 0 0;
transition: 0.5s ease-in-out;
}
a.x1 {
margin: 0;
}
a.x2 {
margin-left: 54px;
}
a.x3 {
margin-left: 108px;
}
a.x4 {
margin-left: 162px;
}
a.x5 {
margin-left: 216px;
}
.links a:hover,
.links a:active,
.links a:focus {
background: blue;
}
.scrl a:visited {
background: orange;
color: #000000;
}
.scrl a:hover {
background: red;
}
.hide {
display: none;
}
.links div:last-child {
margin-bottom: 0;
}
</style>
<div class="myLinkDiv">
<div class="links">
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
</div>
</div>
<div class="playButton">
<div class="initial ">Links</div>
<svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
<audio id="player" preload="none">
<source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</source>
</audio>
<script>
(function iife() {
"use strict";
document.querySelector(".myLinkDiv").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLinkDiv").classList.remove("hide");
var button = document.querySelector(".playButton");
var player = document.querySelector("#player");
document.querySelector('.playButton .initial').style.display = 'none';
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton .play").style.display = "none";
document.querySelector(".playButton .pause").style.display = "inline-block";
player.play();
} else {
document.querySelector(".playButton .play").style.display = "inline-block";
document.querySelector(".playButton .pause").style.display = "none";
player.pause();
}
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>

Try as follows
//music
var audio = new Audio('http://www.sousound.com/music/healing/healing_01.mp3')
checksound();
function checksound() {
var myElement = document.getElementById("soundMenu");
myElement.innerHTML = "Turn Sound " + (audio.paused ? "OFF" : "ON");
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
<button id="soundMenu" onclick="checksound()">Play</button>

How to display a text on the top of Media Player on full screen?

Using the below code, I am getting the result when I debug but I am unable to display the Text without debug.
Style sheet display:'block';
Which is unable to be removed due to this not displaying.
<div class="video-overlay" id="overlayclass"></div>
<video id="preview" muted style="background-color: #2a2a2a;border: 1px solid black; height: 300px; width: 100%;"></video>
(I am using Getusermedia() API)
function toggleFullScreen() {
//var pre1 = preview.webkitDisplayingFullscreen;
if (preview.webkitRequestFullScreen)
{
$(".video-overlay").remove("style");
preview.webkitRequestFullScreen();
var pre = preview.webkitDisplayingFullscreen
if (pre == true) {
$('.video-overlay').text('Recording');
$(".video-overlay").css("display", "flex");
}
}
else if (preview.mozRequestFullScreen)
{
preview.mozRequestFullScreen();
}
}
<div class="video-overlay" id="overlayclass"></div>
<video id="preview" muted style="background-color: #2a2a2a;border: 1px solid black; height: 300px; width: 100%;"></video>
<style>
.video-overlay {
/*display:flex!important;*/
position: absolute;
left: 0px;
top: 0px;
margin: 10px;
padding: 10px 10px;
font-size: 40px;
font-family: Helvetica;
color: #FFF;
float: left;
}
.video-overlay div {
display: flex !important;
}
</style>

Hello Use this code
var overlay= document.getElementById('overlay');
var video= document.getElementById('v');
video.addEventListener('progress', function() {
var show= video.currentTime>=5 && video.currentTime<10;
overlay.style.visibility= show? 'visible' : 'visible';
}, false);
#overlay {
position: absolute;
top: 100px;
color: #FFF;
text-align: center;
font-size: 20px;
background-color: rgba(221, 221, 221, 0.3);
width: 640px;
padding: 10px 0;
z-index: 2147483647;
}
#v {
z-index: 1;
}
<video id="v" controls>
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay">This is HTML overlay on top of the video! </div>
Follow this link here is a demo as per your requirement. Good Luck
http://jsfiddle.net/carmijoon/pzbkx/