How to Abort/destroy HTML5 audio stream from previous stream after new button is clicked?

How to Abort/destroy HTML5 audio stream from previous stream after new button is clicked? - javascript

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>

Related

Blur Video background using HTML5 video and React

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>

Why is this simple JS video player not working?

I can get the video to show up on the page, but it will not play. What is going wrong? (Btw...I am a newbie and am using google chrome and Visual Studio Code.)
Here is the code. I would appreciate ANY help I could get. Thanks!
var vid = document.getElementById("croninvideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
.vplayer {
margin-top: 0;
width: 500px;
height: 380px;
}
button {
width: 80px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
background-color: lightgray;
}
#video {
max-width: 700px;
height: 370px;
}
<div class="vplayer">
<video id="croninvideo" controls>
<source id="video" src="vid-Cronin.mp4" type="video/mp4">
</video>
</div>
<div class="buttonGroup">
<button onclick="play">Play</button>
<button onclick="pause">Pause</button>
</div>

To run functions you need parentheses, for example myFunction(). You're trying to call a function inside the onclick attributes without parentheses.
var vid = document.getElementById("croninvideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
.vplayer {
margin-top: 0;
width: 500px;
height: 380px;
}
button {
width: 80px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
background-color: lightgray;
}
#video {
max-width: 700px;
height: 370px;
}
<div class="vplayer">
<video id="croninvideo" controls>
<source id="video" src="vid-Cronin.mp4" type="video/mp4">
</video>
</div>
<div class="buttonGroup">
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
</div>

Multiple videos with multiple classes used in one js function

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

Centered image on video tag

Allright for a project I need to have a centered image (a play button) rendered at runtime on top off a video depending on the UserAgent. If the userAgent isn't Firefox I want to display the image since Firefox has it's own playEvent and button on top of the video at start. All my previous attempts to do so have failed.
I tried:
tag in the video tag and put the z-index to 10 while putting video z-index to 1
Putting a div with a background image around the video tag
Are there any other ways to do this, and please don't reply use a poster since I allready have a poster I need to use.
-EDIT-
Code:
<tr>
<td runat="server" width="680px" height="383px" id="vContainer">
<video id="player" style="z-index: 1" width="100%" height="100%" title="" controls runat="server">
<source runat="server" id="ffVideo" type="video/ogg" />
<source runat="server" id="mp4Video" type="video/mp4" />
</video>
<embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px" title="" style="display: none" type="application/mp4" runat="server" />
</td>
</tr>

As simple as put a tag and give it more z-index. You can make it running: http://jsfiddle.net/65rda3jq/
<div class="cont">
<div class="img"></div>
<video id="player" style="z-index: 1" width="100%" height="100%" title="" controls
runat="server">
<source runat="server" id="ffVideo" type="video/ogg" />
<source runat="server" id="mp4Video" type="video/mp4" />
</video>
<embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px"
title="" style="display: none" type="application/mp4" runat="server" />
</div>
CSS
.cont {
position:relative;
}
video { position: relative; }
.img {z-index:10; background: #f00; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; }

Try this one:
html:
<div class="cont">
<div class="img"><span class='play_icon'></span></div>
<video id="player" style="z-index: 1" width="100%" height="100%" title="" controls
runat="server">
<source runat="server" id="ffVideo" type="video/ogg" />
<source runat="server" id="mp4Video" type="video/mp4" />
</video>
<embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px"
title="" style="display: none" type="application/mp4" runat="server" />
</div>
CSS:
.cont {
position:relative;
background:rgba(42,42,42,0.9);
border:none;
color:#fff;
outline: none;
}
.play_icon{
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 36px solid #fc8b02;
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
video { position: relative; }
.img {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 10%;
height: 16%;
cursor: pointer;
border-radius: 5px;
background: rgba(0,0,0,0.6);
}
http://jsfiddle.net/Grald/kgwvupjm/

Having a div with buttons over a video

I have a video in my page and I would like to have a div with specific controls over the video instead of the regular ones.
I have tried setting the div to absolute but even though the buttons appear, they are not clickable.
Is there any way (without jquery) to do this where the buttons in the div are above the video and clickable?
Video:
<div id="divVideo" style="text-align:center">
<video id="video1" width="720" autoplay loop>
<source src="01_vid.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Buttons (they have a small script):
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
Script (probably unnecessary):
var myVideo = document.getElementById("video1");
function playPause(btn) {
if (myVideo.paused) {
myVideo.play();
btn.innerHTML = "▮&#9646"
} else {
myVideo.pause();
btn.innerHTML = "&#9658"
}
}
function muteUnmute(etc) {
if (myVideo.muted) {
myVideo.muted = false
etc.innerHTML = "Mute"
} else {
myVideo.muted = true;
etc.innerHTML = "Unmute"
}
}
function goHD(el) {
if (myVideo.width != 1280){
myVideo.width = 1280
el.innerHTML = "SD"
}
else{
myVideo.width = 720
el.innerHTML = "HD";
}
}
This is my CSS:
#botoes {
float: center;
position: absolute;
bottom: 0; z-index: 1;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#divVideo {
position: relative;
width: 720px;
float: left;
height: 405px;
}
#video {
position: relative;
width: 720px;
height: 405px;
background-color: blue;
float: left;
display: block;
}
How do I make the buttons float over the video (that is inside a div)?

I cannot add a realistic video here. So imagine the image to be a video.
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>
If you wanna make it only appear once you hover your mouse over the video, there you go:
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center; display: none;}
.video:hover .buttons {display: block;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>

video {
width: 300px;
height: auto;
}
div {
background: rgba(255, 255, 255, .85);
height: 50px;
width: 500px;
position: relative;
top: -50px;
padding: 5px;
}
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
<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>
<button>Start</button>
<button>End</button>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to Abort/destroy HTML5 audio stream from previous stream after new button is clicked? - javascript

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.

Related

Blur Video background using HTML5 video and React

Why is this simple JS video player not working?

Multiple videos with multiple classes used in one js function

Centered image on video tag

Having a div with buttons over a video

Categories

Resources