I have a few images on my page and when I hover over them they should each play a certain sound. Also, I don't want audio players to be visible.
I tried this but it only works when I click on audio player before hovering image:
HTML
<img src = "Pkokoska.jpg" onmouseover="playSound1()">
<img src = "Pkonj.jpg" onmouseover="playSound2()">
<audio controls id="audio1"><source src="Zkokoska.wav" type="audio/wav"></audio>
<audio controls id="audio2"><source src="Zkonj.wav" type="audio/wav"></audio>
JavaScript
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound1() {
sound1.play();
}
function playSound2() {
sound2.play();
}
You have to add controls attribute in the audio tag to activate the controlling functions such as play , plause ,etc.. for that element
<audio controls id="abc> ... </audio>
You can also hide the controls tab by ussing css property dsiplay:none
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound1() {
sound2.pause();
sound2.currentTime = 0;
sound1.play();
}
function playSound2() {
sound1.pause();
sound1.currentTime = 0;
sound2.play();
}
audio{
display:none;
}
<img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound1()">
<audio id="audio1" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>
<img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound2()">
<audio id="audio2" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>
I don't know if this will work on pure javascript but am sure it will with JQuery
function playSound1() {
sound1.trigger('play');
}
function playSound2() {
sound2.trigger('play');
}
Related
I have a JS function that changes the video source of an HTML video. A button activates this function. It loads the same new video on switch. There are 2 videos of the same length.
How do I:
interchange the video every time I click the button?
when i click the button, can the video load at the same time the previous video was playing?
HTML:
<button onclick="myFunction()" type="button">Change Video</button><br>
<video id="myVideo" controls autoplay>
<source id="mp4_src" src="video1.mp4" type="video/mp4">
<source id="mp4_src" src="video2.mp4">
</video>
JS
var vid = document.getElementById("myVideo");
function myFunction() {
vid.src = "video2.mp4";
vid.load();
}
Here is the fiddle that solves both of your problems, http://jsfiddle.net/egjyd9rs/5/
Basically, the toggle function which takes care of both is as below,
function myFunction() {
currentlPlayingTime = vid.currentTime;
if (currentlyPlaying === 1) {
vid.src = src2;
currentlyPlaying = 2;
statusElement.innerText = 'Going to play video2..';
} else {
vid.src = src1;
currentlyPlaying = 1;
statusElement.innerText = 'Going to play video1..';
}
vid.load();
vid.addEventListener('loadedmetadata', function () {
vid.currentTime = currentlPlayingTime;
}, false);
}
I am using HTML5 video tag to play videos on my website. When a certain image is clicked I want it to pull up the videoplayer and play the corresponding video. Any ideas on how to do this and make it compatible across all browsers?
Heres the video player, So I want the src to change depending on what image is clicked
<video width="320" height="240" controls>
<source src="" class="videoPlayer">
<source src="" class="videoPlayer">
</video>
With this being the images clicked
<img src="images/1.jpg" class="boxImage" data-project="Project"
data-videos="images/Portfolio/Test.webm, images/Portfolio/Test.mp4">
<img src="images/2.jpg" class="boxImage" data-project="Project"
data-videos="images/Portfolio/Test2.webm, images/Portfolio/Test2.mp4">
var video = document.querySelector('video');
video.oncanplaythrough = function() {
video.play();
};
$('.boxImage').on('click', function() {
var data_videos = $(this).data('videos').split(',');
for (var i = 0, l = data_videos.length; i < l; i++) {
var mime_type = 'video/' + data_videos[i].split('.').pop();
if ( video.canPlayType(mime_type) ) {
video.src = data_videos[i];
break;
}
}
});
Demo
How do I use webkit-playsinline in javascript instead of in html5 video tag? I want to use it just like using video tag control/autoplay attribute in javascript or if you guys have any other method that is working? I'm working on a PhoneGap iOS app that stream video.
Below is some approach that I have tried but none are working:
videoPlayer.WebKitPlaysInline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "WebKitPlaysInline";
videoPlayer.webkit-playsinline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "true";
videoPlayer.WebKitPlaysInline = true;
videoPlayer.webkit-playsinline = "true";
videoPlayer.webkit-playsinline = true;
My current code(js):
function loadPlayer() {
var videoPlayer = document.createElement('video');
videoPlayer.controls = "controls";
videoPlayer.autoplay = "autoplay";
videoPlayer.WebKitPlaysInline = true;
document.getElementById("vidPlayer").appendChild(videoPlayer);
nextChannel();
}
My current code(html):
<body onload="loadPlayer(document.getElementById('vidPlayer'));"><!-- load js function -->
<li><span class="ind_player"><div id="vidPlayer"></div></span></li><!-- video element creat here -->
Any helps are much appreciate. Thanks.
You can do this without jQuery:
var videoElement = document.createElement( 'video' );
videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');
You have to activate this functionality in your iOs application's WebView :
webview.allowsInlineMediaPlayback = true;
You can check this post for more details:
HTML5 inline video on iPhone vs iPad/Browser
You need to attach it to the video element and set it as video's attribute
such as :
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
so you could do (with jQuery) :
$('video').attr('webkit-playsinline', '');
I'm trying to play sound effect in a game with each hit,but the sound sometimes play and others NOT !!
I'm using the next code :
<script>
var hitSound = new Audio();
function playEffectSound()
{
hitSound = document.getElementById('effects');
hitSound.loop = false;
hitSound.currentTime = 0;
hitSound.play();
}
</script>
<audio id="effects" hidden>
<source src="sound/mp3/effect.mp3" type="audio/mpeg">
<source src="sound/wav/effect.wav" type="audio/wav">
</audio>
any ideas ?
Whenever you are using audio tag try writing its script after audio tag ,If you write script before that audio tag it gives sometime problem in playing the audio,
i would recommend Write Script at the end of the page that's the standard way to write script.
http://jsfiddle.net/LyDWH/4/
<!DOCTYPE html>
<html>
<body>
<audio id="effects" hidden >
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<div onclick= "playEffectSound();">Horse Click Me..!</div>
</body>
<script>
var hitSound = new Audio();
function playEffectSound()
{
hitSound = document.getElementById('effects');
hitSound.currentTime = 0;
hitSound.play();
}
</script>
</html>
You could use the following code to play audio
function playEffectSound(sound) {
//Does the sound already exist?
if (document.getElementById(sound) != null) {
document.getElementById(sound).play();
return;
}
//Create elements
var audioElement = document.createElement("audio");
var sourceElement = document.createElement("source");
sourceElement.src = sound + ".mp3";
sourceElement.type = "audio/mpeg";
var sourceElementWave = document.createElement("source");
sourceElementWave.src = sound + ".wav";
sourceElementWave.type = "audio/wav";
//Add sources to audio
document.body.appendChild(sourceElementWave);
document.body.appendChild(audioElement);
audioElement.setAttribute("id", sound);
audioElement.appendChild(sourceElement);
audioElement.loop = false;
audioElement.currentTime = 0;
audioElement.play();
}
You can use it like this: playEffectSound("sounds/effect"); and it will either play sounds/effect.mp3 or sounds/effect.wav
try with each hit to add a new var sound and sound.play() and it will just work fine
I am new to js so forgive me. I'm using the html5 audio tag with some js to only show play and pause as a button. I would like to change the text for play & pause out with images. Like playbtn.png and pausebtn.png. Here is where I'm stuck.
html:::
<!-- hidden audio player -->
<audio id="audio" controls autoplay hidden="">
<source src="music/eatForTwo.wav" type="audio/wav">
<source src="music/eatForTwo.mp3" type="audio/mpeg">
<p>Your Browser Doesn't Support The HTML5 audio Element</p>
</audio>
<button id="playpause" title="play" onclick="togglePlayPause()" ><img id="imgbtn" src="music/pausebtn.png"/></button>
<!-- javascript for audio control
-->
<script src="code/html5audio.js" type="text/javascript">
</script>
js:::
// Grab a handle to the video
var audio = document.getElementById("audio");
// Turn off the default controls
audio.controls = false;
function togglePlayPause() {
var playpause = document.getElementById("playpause");
if (audio.paused || audio.ended) {
playpause.title = "pause";
playpause.style.backgroundImage = "url(music\pausebtn.png)";
audio.play();
}
else {
playpause.title = "play";
playpause.style.backgroundImage = "url(music\playbtn.png)";
audio.pause();
}
}
Edit your js as following but you have to change url(c:\folder\img.jpg) to url(yourPath) .... Now yourPath does not mean yourPath it means the location of the image on your hard disk
// Grab a handle to the video
var audio = document.getElementById("audio");
// Turn off the default controls
audio.controls = false;
function togglePlayPause() {
var playpause = document.getElementById("playpause");
if (audio.paused || audio.ended) {
//playpause.title = "pause";
playpause.style.backgroundImage = "url(c:\folder\img.jpg)";
audio.play();
}
else {
//playpause.title = "play";
playpause.style.backgroundImage = "url(c:\img1.jpg)";
audio.pause();
}