I'm regretfully a total noob to html so I was hoping you could answer my question.
I'm trying to implement three audio files on my webpage but only one of the source files is playing. The buttons for the other files work, but they only play from the one source. Can you help me?
Here's the code:
<div class="sound1">
<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; ">
<button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent;
; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button>
<audio id="Sound">
<source src="" type="audio/wav" />
<source src="" type="audio/ogg" />
<source src="svartbakur-4.mp3" type="audio/mpeg" />
</audio>
</div>
<script type="text/javascript">
var myAudio=document.getElementById("Sound");
function playPause()
{
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</div>
</div><!--Div hyphenate-->
<div class="sound2">
<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; ">
<button style="background-image:url(speaker_likka.png); width:100px; height:100px; border:transparent;
; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button>
<audio id="Sound">
<source src="" type="audio/wav" />
<source src="" type="audio/ogg" />
<source src="likka-6.mp3" type="audio/mpeg" />
</audio>
</div>
<script type="text/javascript">
var myAudio=document.getElementById("Sound");
function playPause()
{
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</div>
</div><!--Div hyphenate-->
<div class="sound3">
<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; ">
<button style="background-image:url(speaker_fiskimasi.png); width:100px; height:100px; border:transparent;
; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button>
<audio id="Sound">
<source src="" type="audio/wav" />
<source src="" type="audio/ogg" />
<source src="fiskimasi-21.mp3" type="audio/mpeg" />
</audio>
</div>
<script type="text/javascript">
var myAudio=document.getElementById("Sound");
function playPause()
{
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</div>
</div><!--Div hyphenate-->
Thank you so much!
Here is how to play the multiple audio from one single JavaScript function:
<HTML>
<head>
<title>aa</title>
<script type="text/javascript">
function playPause(x)
{
var myAudio=document.getElementById(x);
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</head>
<body>
<div class="sound1">
<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; ">
<audio id="Soundx1">
<source src="XXXXX.mp3" type="audio/mp3">
</audio>
<button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx1');" ></button>
</div>
</div>
<div class="sound2">
<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; ">
<audio id="Soundx2">
<source src="XXXXX.mp3" type="audio/mp3" />
</audio>
<button style="background-image:url(speaker_likka.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx2');" ></button>
</div>
</div>
<div class="sound3">
<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; ">
<audio id="Soundx3">
<source src="XXXXXX.mp3" type="audio/mp3" />
</audio>
<button style="background-image:url(speaker_fiskimasi.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx3');" ></button>
</div>
</div>
</body>
</html>
You have multiple elements with the same ID. You are also redefining the playPause() function every time. In general, you seem to have no idea what you're doing.
You'd be better off just adding the controls attribute to the audio tags.
The player is looking for the id "Sound".
getElementById("Sound");
You have 3 <audio id="Sound">s
Try changin them to something like <audio id="Sound1"> and <audio id="Sound2"> etc
You'll need to update the player to reflect your new audio ids.
I just tested and found that your problem is related with the JavaScript Code you are using to play the audio files and the way you define the audio tag as one single tag is bind with all mp3 files:
<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; ">
<audio id="Soundx1">
<source src="XXXXXX.mp3" type="audio/mp3">
</audio>
<button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button>
</div>
<script type="text/javascript">
var myAudio1=document.getElementById("Soundx1");
function playPause()
{
if (myAudio1.paused)
myAudio1.play();
else
myAudio1.pause();
}
</script>
</div>
So What I have changes:
Audio id= Unique for each audio file
Unique JavaScript object for each audio ID as
var myAudioXX=document.getElementById("_unique_id_");
This code does work will multiple mp3 files. Also you should be using one single JavaScript function to play all the files instead of an each func to play each file. IF you will use one single JavaScript function to play all files, you can pass ID tag by object reference and it will reduce to code.
Related
How can I stop the video while closing it?
Can someone give me some solution or new code for this?
<div class="video-player" id="videoPlayer">
<video width="100%" controls autoplay id="myVideo">
<source src="filmy/1.%20No%20Roots%20-%20Alice%20Merton.mp4" type="video/mp4">
</video>
<img src="images/close.png" class="close-btn"
onclick="stopVideo()">
</div>
<script>
var videoPlayer = document.getElementById("videoPlayer");
var myVideo = document.getElementById("myVideo");
function stopVideo(){
videoPlayer.style.display = "none";
}
function playVideo(file){
myVideo.src = file;
videoPlayer.style.display = "block";
}
</script>
And here is where I declare video:
<div class="small-img-row">
<div class="small-img">
<img src="images/Sk%C5%82ad%20Artur%202.jpg" width="170px" height="100px">
<img src="images/play.png" class="play-btn" onclick="playVideo('filmy/2. Dance Monkey - Tones and I.mp4')">
</div>
<p>Dance Monkey - Tones and I</p>
</div>
I Have multiple videos in single page of Angular Application
I want to play video while scrolling when video element come to element, and pause other videos.
i.e
<div class="video_content left">
<span style="font-weight:bold">1</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">2</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">3</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">4</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
#HostListener('window:scroll', ['$event'])
scroll(event: any) {
console.log(window.pageYOffset);
var demo_video: any = document.getElementById("demo_video");
var how_to_video: any = document.getElementById("how_to_video");
if (window.pageYOffset > 400 && window.pageYOffset < 1000) {
demo_video.muted = true;
demo_video.pause();
how_to_video.play();
}
}
ngOnInit(): void {
var demo_video: any = document.getElementById("demo_video");
demo_video.muted = false;
demo_video.play();
window.addEventListener('scroll', this.scroll, true);
}
When I play video it may be landscape or portrait in orientation. I have 2 images imgfeatured1 and imgfeatured2 which appear left and right of the video respectively. I wish these images to adjust automatically to be the same height as the video being played.
<div id="streaming">
<video playsinline ID="videoToPlay" poster="https://www.example.co.uk/files/images/videoPoster.jpg" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
<asp:Image ID="imgFeatured1" alt="Featured 1" imageUrl="https://www.example.co.uk/files/images/icons/featured1.png" class="videologo" runat="server" />
<asp:Image ID="imgFeatured2" alt="Featured 2" imageUrl="https://www.example.co.uk/files/images/icons/featured2.png" class="videologoright" runat="server" />
</div>
CSS so far..
.videologo {
position: absolute;
left: 5px;
}
.videologoright {
position: absolute;
right: 5px;
}
if you want it static based on what is loaded on request you need to use javascript to get and set height on the images.
if you want the images to be on each side of the video you need to rearrange the html if you want to follow best practices.
Javascript version:
Get the height of the video and set that height to the image while width = auto
var imageOne = document.getElementById("imgFeatured1");
var imageTwo = document.getElementById("imgFeatured2");
var vid = document.getElementById("videoToPlay");
imageOne.style.height = vid.offsetHeight +"px";
imageTwo.style.height = vid.offsetHeight + "px";
console.log(vid.offsetHeight);
console.log(imageTwo.style.height);
#streaming {
display: flex;
}
body {
background: #333;
}
<body>
<div id="streaming">
<img id="imgFeatured1" alt="Featured 1"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologo" runat="server" />
<div id="VidWrapper">
<video playsinline id="videoToPlay" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
</div>
<img id="imgFeatured2" alt="Featured 2"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologoright" runat="server" />
</div>
</body>
CSS version
Set img and video height to the same and automatic width
#streaming {
display: flex;
}
body {
background: #333;
}
img, video{
height: 25vh;
width: auto;
}
<body>
<div id="streaming">
<img id="imgFeatured1" alt="Featured 1"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologo" runat="server" />
<div id="VidWrapper">
<video playsinline id="videoToPlay" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
</div>
<img id="imgFeatured2" alt="Featured 2"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologoright" runat="server" />
</div>
</body>
I have the following code for playing a video and showing its subtitle track.
<video id="vTest" class="playr_video" controls preload="metadata">
<source src='upc-tobymanley.theora.ogg' type='video/ogg'>
<source src='upc-tobymanley.mp4' type='video/mp4'>
<track label="English subtitles" kind="subtitles" srclang="en" src="upc-video-subtitles-en.vtt" default>
</video>
<div id="subtitle"> </div>
Is it possible to show the subtitles inside <div id="subtitle"> </div> instead of the player?
Add this javaScript after <video> element
<script>
loadTextTrack({videoId:'vTest', // the ID of the video tag
kind:'subtitles', // the kind of track
srclang:'en', // the language of the source file (optional)
targetId:'subtitle'}); // the ID of the element into which to insert the timed text
</script>
Define some css
<style type="text/css">
#subtitle{width: 480px; position: absolute; top: 280px;padding: 3px 10px; text-align: center; color:#fff;background-color:#000; font-family: Helvetica,Arial,sans-serif; font-size: 0.9em; font-weight: bold;min-height:3.6em;}
</style>
I have a landing page where the user can Login and signup and in the background is a Trailer for the site. The video has audio, and is a .mp4 file.
My main goal is to get a feature where the user can click a certain button and all page audio will be muted.
Many thanks
---HTML WITH VIDEO---
<div class="Main animated fadeIn">
<!--To make the Site Unique, I have included Several Trailers for the Main Landing Page !-->
<video autoplay="" id="bgvid" loop="" poster="polina.jpg"><source src=
"img/indexMV.mp4" type="video/mp4"> <source src="img/indexMV.mp4"
type="video/mp4"></video>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="mute_all">Mute all</button> |
<button id="unmute_all">UnMute all</button>
<br/>
<script>
$(document).ready(function(){
/*** Mute all ***/
$('#mute_all').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_all').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>
<h4>Video</h4>
<video id="myVideo" width="320" height="176" controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br/>
<h4>AUdio</h4>
<audio width="320" height="176" controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"> Your browser does not support HTML5 video.
</audio>
Just get a reference to your video and you can mute/unmute it
var vid = document.getElementById("bgvid");
vid.muted = true; // to mute
vid.muted = false; // to unmute
You wanted to be able to mute any and all sources of audio, then you'll need to be able to collect references to all instances of video and/or audio playing. This is what this demo does:
Plays/Pauses 5 videos individually or all at once.
Mute/Unmute volume individually or all at once.
This is the process:
Make a NodeList (vPlayers) of all video elements with the class of .vPlayer.
Take the NodeList (vPlayers) and convert it into an array (vArray).
EventListeners are added to the buttons, vPlay and vMute and once triggered, by a click, the callback function will iterate through the vArray.
Each video element (.vPlayer a.k.a. vArray[i]) will be checked:
to see if it's playing a video (playToggle function), or ...
to see if it's muted (muteToggle function).
After the preliminary status check, playToggle and muteToggle will play/pause and mute/unmute each vPlayer according to vPlayer's state.
const vids = Array.from(document.querySelectorAll("video"));
const vControl = document.forms.vControl;
const vC = vControl.elements;
const vPlay = vC.vPlay;
vPlay.addEventListener('click', playToggle);
function playToggle(e) {
e.target.textContent = e.target.textContent === '▶️' ? '⏸️' : '▶️';
vids.forEach(v => v.paused ? v.play() : v.pause());
}
const vMute = vC.vMute;
vMute.addEventListener('click', muteToggle);
function muteToggle(e) {
e.target.textContent = e.target.textContent === '🔊' ? '🔇' : '🔊';
vids.forEach(v => {
if (v.muted) {
v.muted = false;
} else {
v.muted = true;
}
});
}
button {
display: inline-flex;
justify-content: center;
align-items: center;
margin: 15px;
width: 54px;
line-height: 36px;
font: 300 2.5ch/1 'Consolas';
color: #EEE;
background: rgba(83, 83, 83, 0.25);
border: 3px outset grey;
border-radius: 9px;
cursor: pointer;
pointer-events: auto;
}
button:hover {
background: transparent;
color: #00D;
border: 3px inset blue;
}
.vBox {
display: table-cell;
}
#vControl {
width: 295px;
height: 160px;
display: inline-table;
}
fieldset {
display: flex;
}
<section class="vBox">
<video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs21s3.png" width="320" height="180" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4" type="video/mp4">
</video>
<video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs12s3.png" width="320" height="180" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
</video>
<form id="vControl" name="vControl">
<fieldset>
<button id="vPlay" type='button'>▶️</button>
<button id="vMute" type='button'>🔊</button>
</fieldset>
</form>
</section>