That title is quite confusing, I know.
So briefly, I have 5 videos and want them all to use js to play AND pause them individually onclick.
Each video has a different class, but I've given them all a second class to group them together. (to my knowledge)
my js :
var myVideo = document.getElementByClassName("videos");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
my html: (all 5 videos are idential html except the id's)
<div class="video1">
<video id="video1" class="videos video1" width="500" height="303" onclick="playPause();">
<source src="hlace.mp4" type="video/mp4">
<source src="hlace.ogg" type="video/ogg">
</video>
</div>
I've used .getElementById and the js has worked for the video which Id I used. But now I want to apply it for all the videos and I'm stumped.
https://jsfiddle.net/jomot/1jvq1myf/
You can do something like below -
Your js fiddle code has many errors due to the videos and the main error is -
This
var myVideo = document.getElementByClassName("videos");
should be changed to
var myVideo = document.getElementsByClassName("videos");
The below code will give you an idea of what you need to do. You can simply pass this.id to playpause() function. This way it will only work on the div that is clicked and not on others. By doing this, there is no need to group the elements that you have done in your code by giving the same css class to all div elements.
Hope this helps!
function playPause(id) {
var divId = document.getElementById(id);
if (divId.getAttribute('status') == 'paused') {
divId.setAttribute('status', 'play');
divId.play();
}
else{
divId.setAttribute('status', 'paused');
divId.pause();
}
}
.responsive {
padding: 0 6px;
width: 24.99999%;
margin-left: 20%;
}
#media only screen and (max-width: 1700px){
.responsive {
width: 49.99999%;
margin-left: 5%;
}
}
#media only screen and (max-width: 1200px){
.responsive {
width: 24.99999%;
margin-left: 2%;
}
}
div.video1 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video2 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video3 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video4 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video5 {
margin-left: 26%;
margin-bottom: 10%;
display: inline-block;
}
<div class="background">
<div class="transbox">
<hr>
<h2> Highlights </h2>
<hr>
<div class="responsive">
<div class="video1">
<video id="video1" class="videos video1" status="paused" width="500" height="303" onclick="playPause(this.id);">
<source src="hlace.mp4" type="video/mp4">
<source src="hlace.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video2">
<video id="video2" class="videos video2" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hldustace.mp4" type="video/mp4">
<source src="hldustace.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video3">
<video id="video3" class="videos video3" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hlflick.mp4" type="video/mp4">
<source src="hlflick.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video4">
<video id="video4" class="videos video4" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hlmirage.mp4" type="video/mp4">
<source src="hlmirage.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video5">
<video id="video5" class="videos video5" status="paused" width="500" height="300" onclick="playPause(this.id)">
<source src="hlreel.mp4" type="video/mp4">
<source src="hlreel.ogg" type="video/ogg">
</video>
</div>
</div>
</div>
</div>
Thanks
Related
If you are watching tv, you change the channel, then you go back to the pervious channel, you aren't watching it from the beginning.
Is that more understandable to what I am trying to do?
Where the stream stops downloading in the background.
Goes back to as if the button was never clicked.
That is what I am trying to do in the code.
const buttons = document.querySelectorAll('.playButton');
const audios = document.querySelectorAll('audio');
buttons.forEach((button, index) => {
button.addEventListener('click', () => {
audios.forEach((audio, audioIndex) => {
if (index === audioIndex) {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
} else {
audio.pause();
}
});
});
});
How would this be done?
const buttons = document.querySelectorAll('.playButton');
const audios = document.querySelectorAll('audio');
buttons.forEach((button, index) => {
button.addEventListener('click', () => {
audios.forEach((audio, audioIndex) => {
if (index === audioIndex) {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
} else {
audio.pause();
}
});
});
});
html,
body {
height: 100%;
background: url("https://i.imgur.com/TSD1Xp1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
padding: 0;
margin: 0;
}
body {
display: flex;
}
.playButtonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
max-width: 800px;
gap: 18px;
animation: fadeInButtons 3s ease-in 0s forwards;
}
.buttonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
max-width: 600px;
gap: 18px;
animation: fadeInButtons 3s ease-in 0s forwards;
}
audio {
width: 200px;
}
<div class="playButtonContainer ">
<audio title="Praise 95" preload="none">
<source src="https://18093.live.streamtheworld.com/SP_R3935365_SC" type="audio/mpeg" />
</audio>
<audio title="Relax Club Music" preload="none">
<source src="https://getradio.me/rcm" type="audio/mpeg" />
</audio>
<audio title="Sound Park #Deep" preload="none">
<source src="https://getradio.me/spdeep" type="audio/mpeg" />
</audio>
<div class="buttonContainer">
<button class="playButton">Praise 95</button>
<button class="playButton">Relax Club Music</button>
<button class="playButton">Sound Park #Deep</button>
</div>
</div>
As I can see they are streams and you can't control what they are queuing on their side. Other than that, I can see songs being changed after some time.
I was able to figure it out.
const buttons = document.querySelectorAll('.playButton');
const audios = document.querySelectorAll('audio');
buttons.forEach((button, buttonIndex) => {
button.addEventListener('click', () => {
buttons.forEach((button) => button.classList.remove('blue'));
audios.forEach((audio, audioIndex) => {
audio.src = ""
if (buttonIndex === audioIndex) {
button.classList.add('blue')
audio.src = button.dataset.src;
audio.play();
}
});
});
});
html,
body {
height: 100%;
background: url("https://i.imgur.com/TSD1Xp1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
padding: 0;
margin: 0;
}
body {
display: flex;
}
.playButtonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
max-width: 800px;
gap: 18px;
animation: fadeInButtons 3s ease-in 0s forwards;
}
.buttonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
max-width: 600px;
gap: 18px;
}
.playButton{
cursor: pointer;
}
.playButton.blue {
background-color: cornflowerblue;
border: 2px solid purple;
}
audio {
width: 200px;
}
<div class="playButtonContainer ">
<audio title="Praise 95" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Relax Club Music" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Sound Park #Deep" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Sound Park Classic" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Delish Deep" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Music Factory Radio" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="CBOE FM" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="M.Deep Radio" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Fly 104" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Luxury Music" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Rock Melodic Radio" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Nu Euphoria" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Cavo Paradiso Club" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="90s Eurodance" preload="none">
<source type="audio/mpeg" />
</audio>
<div class="buttonContainer">
<button class="playButton" data-src="https://18093.live.streamtheworld.com/SP_R3935365_SC">Praise 95</button>
<button class="playButton" data-src="https://getradio.me/rcm">Relax Club Music</button>
<button class="playButton" data-src="https://getradio.me/spdeep">Sound Park #Deep</button>
<button class="playButton" data-src="https://getradio.me/spclassic">Sound Park Classic</button>
<button class="playButton" data-src="https://getradio.me/delishdeep">Delish Deep</button>
<button class="playButton" data-src="https://i4.streams.ovh/sc/musicfactory/stream">Music Factory Radio</button>
<button class="playButton" data-src="https://getradio.me/svoefm">CBOE FM</button>
<button class="playButton" data-src="https://deephousex.ru/live">M.Deep Radio</button>
<button class="playButton" data-src="https://imagine2.radioca.st/;">Fly 104</button>
<button class="playButton" data-src="https://getradio.me/luxurious.music">Luxury Music</button>
<button class="playButton" data-src="https://i4.streams.ovh:2200/ssl/rockmelo?mp=/stream">Rock Melodic Radio</button>
<button class="playButton" data-src="https://radio.nueuphoria.com:8443/live">Nu Euphoria</button>
<button class="playButton" data-src="https://neos.win:48488/1">Cavo Paradiso Club</button>
<button class="playButton" data-src="https://myradio24.org/5967">90s Eurodance</button>
</div>
</div>
i posted this type of code earlier, but i'm posting it again in hopes of trying to figure out what to do for the javascript. i'm in a creative coding class trying to create a "useless website." kind of like what you see in https://theuselessweb.com/
the idea is that when you submit a file, theres a chance that there would be a video of knuckles from sonic questioning, accepting or denying the file.
i'm having trouble trying to figure out how to include a file insert into an if statement, to then create the random number generator. I'll post my code below, anything helps!
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Useless Website</title>
<meta charset="UTF-8">
<meta name="description" content="A website that lets you insert a photo/video, and then knuckles from the sonic series approves, denies or questions your work or -meme- ">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--contains all HTML-->
<div class="container">
<!--text above video-->
<div class="header">
<h1>Get your Meme Approved!</h1>
<h2>By Knuckles himself.</h2>
<p>An "Introduction to Programming Concepts" coding project by Megan Kingston. Professor is Adam Thomas at Humber College.</p>
</div>
<!--where you insert your meme-->
<div class="insert" id="insert">
<label for="myfile">Place Meme Here:</label>
<input type="file" id="myfile" name="myfile">
</div>
<!--video options, under header (technically will be one video)-->
<div class="video" id="video">
<div class="meme-approved" id="meme-approved">
<video width="640" height="480" controls>
<source src="knuckles-videos/meme-approved.mp4" type="video/mp4">
<source src="knuckles-videos/meme-approved.mp4" type="video/ogg">
</video>
</div>
<div class="meme-denied" id="meme-denied">
<video width="640" height="480" controls>
<source src="knuckles-videos/meme-denied.mp4" type="video/mp4">
<source src="knuckles-videos/meme-denied.mp4" type="video/ogg">
</video>
</div>
<div class="meme-questionable" id="meme-questionable">
<video width="640" height="480" controls>
<source src="knuckles-videos/meme-questionable.mp4" type="video/mp4">
<source src="knuckles-videos/meme-questionable.mp4" type="video/ogg">
</video>
</div>
</div>
</div>
<script>
// videos are invisible
var element = document.getElementById("meme-approved"); // get element 1
element.style.visibility = "hidden";
var element = document.getElementById("meme-denied"); // get element 2
element.style.visibility = "hidden";
var element = document.getElementById("meme-questionable"); // get element 3
element.style.visibility = "hidden";
const meme = document.getElementById("insert"); // defining file insert button
var inputArray = ['meme-approved', 'meme-denied', 'meme-questionable'];
for (let i = 0; i < inputArray.length; i++)
{
element += inputArray[i] + "<br>";
}
</script>
</body>
</html>
CSS CODE:
.body {
margin: 0;
}
/* HEADER DESIGN */
.header {
font-family: sans-serif;
background-color: antiquewhite;
text-align: center;
}
.header p {
font-size: 8pt;
color: grey;
}
/* VIDEO DESIGN */
.video {
text-align: center
}
.meme-approved {
position: relative;
top: 0;
left: 0;
}
.meme-denied {
position: relative;
bottom: 485px;
left: 0px;
}
.meme-questionable {
position: relative;
bottom: 970px;
left: 0px;
}
/* FILE INSERT DESIGN */
.insert {
background-color: antiquewhite;
text-align: center;
font-family: sans-serif;
}
Any suggestion on how can I apply such effect?
Using drawImage method on canvas element doesn't work for me because Safari IOS doesn't support video element as a source for drawImage.
Add two video elements - one on top of the other. The bottom one zoomed to fill and with a CSS blur filter applied, the top one scaled to fit with no blur.
#fg {
position: absolute;
top: 50px;
left: 100px;
}
#bg {
position: absolute;
top: 0;
left: 0;
filter: blur(20px);
}
div {
position: relative;
overflow: hidden;
width: 400px;
height: 220px;
}
<div>
<video id="bg" width="400" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<video id="fg" width="200" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
</div>
I am having trouble with this and need help! I am trying to use a video as a background and then put text and images on top of it in a div.
Here is what I have so far:
<section id="VideoSection>
<div id="VideoText">Testing 123</div>
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="movie.mp4" type="video/webm">
</video>
</section>
And this is my CSS:
video#bgvid {
z-index: -2;
}
#VideoText{
position: absolute;
z-index: -1;
}
-DEMO-
<section id="VideoSection">
<div id="VideoText">Testing 123</div>
<video id=bgvid autoplay muted poster="http://media.w3.org/2010/05/bunny/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
<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>
</section>
Css:
video#bgvid {
z-index: -2;
}
#VideoText{
position: absolute;
z-index: 1;
}
then add position:relative; to #VideoSection so that you will be able to use position absolute on the text
#VideoSection{
position:relative;
}
-Demo-
Try to give position:relative to parent element and give position:absolute to child and then give top or left value. check the DEMO.
section#VideoSection{position:relative;}
video#bgvid
{
position: absolute;
z-index: 0;
top:0;
left:0;
}
#VideoText{
position: absolute;
z-index: 1;
top:12px;
}
So this is what i tried so far:
<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">
<video width="520" height="390" style="z-index:-10;">
<source src="m/video.ogv" type="video/ogg">
<source src="m/video.mp4" type="video/mp4">
</video>
</div>
I have a fixed menu and when the menu is over the video , the video just seem to ignore the z-index. Im currently working on chrome windows with no luck. Any ideas?
Use css position:absolute property to both elements which overlaps and try to give values higher than 0 to the z-index
Here is working jsFiddle example.
css:
#main_container { float: left; position: relative; left:0; top:0; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
z-index: 9998; }
html:
<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
Note: Used overlay div for deactivate controls and you can use whatever content on your video, like in jsFiddle example.
Source: Video as background on a website playing on command
On your overlay/menu element, use:
backface-visibility: hidden;
This worked for me. My guess is that it triggers 3d rendering on the element, which eliminates the z-index problem.
The overlay also needs to be a sibling of the video.
It will not work if the video is a child of the overlay.
Works:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
</div><!-- end #overlay -->
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #container -->
Dosen't Work:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #overlay -->
</div><!-- end #container -->
I've only tried this in Chrome so apologies if this isn't universally true.