I just put together this code to play audio on hover.. on a test page, trying to incorporate it into the rest of the site, but the jQuery is clashing with other jQuery, and noconflict mode at this point is a pretty huge job. Is it possible to do the following using only javascript ?
<audio id="whiterose" preload="auto">
<source src="//sarahboulton.co.uk/audio/white-rose.mp3"></source>
<source src="//sarahboulton.co.uk/audio/white-rose.ogg"></source>
</audio>
<div class="whiterose">
white rose?
</div>
<script>
//change audio 1 to audio 2.. 3 .. etc
var audioOne = $("#whiterose")[0];
$(".whiterose a")
.mouseenter(function() {
audioOne.play();
});
</script>
http://sarahboulton.co.uk/audio.html#
Thanks !
<audio id="audio" preload="auto" src="http://sarahboulton.co.uk/audio/white-rose.mp3"></audio>
<div id="test" style="background-color:red;" class="whiterose">
white rose?
</div>
<script>
var test = document.getElementById("test");
test.addEventListener("mouseover", function( event ) {
var audio = document.getElementById("audio");
audio.play();
}, false);
</script>
Related
I am trying to mute / unmute my video. But to start with, it looks like I am not able to select my video. Tried tutorial examples and answers to similar questions but they all point to the same way of selecting the video. Please advice what is wrong here. Thank you.
<!-- HTML -->
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<!-- JS -->
$(function() {
// seems not being selected. Tried without hash and same result.
var vid = $("#myVideo");
//alert works but clearly nothing happening with mute controls
$("#enableMute").click(function(){
alert("enableMute");
vid.muted = true;
vid.volume = 1.0;
});
//alert works but clearly nothing happening with mute controls
$("#disableMute").click(function(){
alert("disableMute");
vid.muted = false;
vid.volume = 1.0;
});
//if i click this button first, the alert is "alert undefined"
$("#checkMute").click(function(){
alert('alert: ' + vid.muted);
});
});
The video is being selected and put into the variable. Using .muted won't work and you need to use jQuery's .prop() function as I found out in this question.
This should work:
HTML
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
JavaScript
$(function() {
// Video is being selected
var vid = $("#myVideo");
$("#enableMute").click(function() {
alert("enableMute");
vid.prop('muted', true);
vid.prop('volume', 1.0);
});
$("#disableMute").click(function() {
alert("disableMute");
vid.prop('muted', false);
vid.prop('volume', 1.0);
});
$("#checkMute").click(function() {
alert('alert: ' + vid.prop('muted'));
});
});
To see it in action with a sample video, go to this link.
SCRIPT AND HTML CODE: When i click on a button, the other buttons are working. I've one class for buttons so how can i use multiple this button ?
Shall i add data_id for each button ?
Is this what you need?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
<source src="http://www.noiseaddicts.com/samples_1w72b820/4160.mp3" id="audio" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Try adding a new class to the tag. And get the element on your JQuery by the new class, like this:
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
$('.play-button').addClass('icon-control-pause')
$('.play-button').removeClass('icon-control-play')
}else{
audio.pause();
$('.play-button').addClass('icon-control-play')
$('.play-button').removeClass('icon-control-pause')
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio src="audio.mp3" id="audio"></audio>
<i class="play-button icon-control-play i-2x" id="play" onclick="play()"></i>
I was hoping for some assistance with this. I have 3 audio instances on a single page. Handling the audio to play and pause isn't an issue. The issue is when audio is playing and I click play on another, I can't get the other audio instance to stop playing. So in the end I have these tracks all playing and I have to manual hit stop on each of them. My code below so far.
Honestly I am not sure how to go about doing the checks for this. First time doing something like this.
Any help would be appreciated :) thanks
HTML:
<div class="voting-artist">
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
</div>
jQuery/JavaScript:
$votingArtist.each(function(i, value) {
var $this = $(this);
var thisAudioPlayBtn = $this.find('.play-btn', $this);
var thisAudioStopBtn = $this.find('.stop-btn', $this);
var thisSelectionCont = $this.find('.selection--play-btn', $this);
var thisAudio = $this.find('.audio', $this);
thisAudioPlayBtn.on('click', function(e) {
thisAudio[0].play();
thisAudioPlayBtn.hide()
thisAudioStopBtn.show();
thisSelectionCont.addClass('is-playing');
});
thisAudioStopBtn.on('click', function() {
thisAudio[0].pause();
thisAudioPlayBtn.show()
thisAudioStopBtn.hide();
thisSelectionCont.removeClass('is-playing');
});
});
Just pause() them all!
thisAudioPlayBtn.on('click', function(e) {
$("audio").pause(); // Add this to pause them all.
$(".selection--play-btn").removeClass("is-playing"); // And remove the playing class everywhere too!
$(".play-btn").hide(); // Reset play/pause button
$(".stop-btn").show();
thisAudio[0].play();
thisAudioPlayBtn.hide()
thisAudioStopBtn.show();
thisSelectionCont.addClass('is-playing');
});
You've all been so great in helping me in the past and I'm hoping we can solve this next problem as well.
I am building a slideshow of sorts using videos as backgrounds instead of images. Everything is working perfectly except that the timing of the videos is off because even though my divs are hidden the videos are all playing at the same time.
So, what I need is a JS/jQuery solution to stop (not pause) and play the videos as the divs are hidden/shown. Here's my code so far:
jsfiddle: http://jsfiddle.net/Z2Nq8/1/
JS:
$(function () {
var counter = 0,
divs = $('#video1, #video2, #video3');
function showDiv () {
divs.hide()
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.show();
counter++;
};
showDiv();
setInterval(function () {
showDiv();
}, 7 * 1000);
});
HTML:
`<div id="videocont">
<div id="video1" class="display">
<video autoplay loop poster="PHI.png" id="bgvid">
<source src="URL/video.mp4" type="video/mp4">
</video>
<div id="title">Headline text.
</div>
</div>
<div id="video2" class="display">
<video autoplay loop poster="PHI.png" id="bgvid">
<source src="URL/video.mp4" type="video/mp4">
</video>
<div id="title">Headline text.
</div>
</div>
<div id="video3" class="display">
<video autoplay loop poster="PHI.png" id="bgvid">
<source src="URL/video.mp4" type="video/mp4">
</video>
<div id="title">Headline text.
</div>
</div>
</div>`
Thanks!
You have auto play on all of the videos.
Set auto play on the first element, then when you're going through the videos use:
VideoElement.play()
And
VideoElement.pause()
If you want to then reset the video you can do:
VideoElement.currentTime = 0;
To manage the videos playing.
Working Fiddle
I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly.
I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.
I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!
HTML:
<div class="image" style="float:left;margin:0;"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers
<div id="layers" class="modalDialog">
<div>
Close
<h3>Layers</h3>
<video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
<source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
for(var i=0; i< 20; i++)
{
document.getElementsByTagName("video")[i].src="";
}
$("#showModal").click(function() {
var videoID = document.getElementsById("showModal").getAttribute('href');
var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
videoElement.load();
});
$("#closeModal").click(function() {
$("#videoContainer")[0].pause();
});
});
This answer is maybe related.
Dont have your files but got it working using the following code:
<video id="videoContainer" class="videoContainer" style="width:698px;">
<source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
$("#showModal").click(function () {
var videoID = document.getElementById("showModal").getAttribute('href');
var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
var srcID = document.getElementById("mp4Source");
videoElement.src = srcID.getAttribute("src");
videoElement.load();
videoElement.play();
});