My problem is exactly like this post
How to stop music when embedded youtube video starts?
But it doesn't solve my problem.
My html for music :
<audio id="myAudio" autoplay>
<source src="music/Morning-Sun.wav">
</audio>
embed video :
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
[edit]
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio'); aud.pause();">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
First of all, (aside from boohiss for having background music), you are better off to create a function rather than include a string of javascript in your html. You made the error of not defining 'thevid' as a variable, which i corrected. You weren't calling the audio at any point either to stop it, so i created a variable to find it by id, and pause it on video play.
Naturally my sound is different, and as it is short i have set it to loop, but you can easily amend this.
Hope this helps you out :)
var thevid=document.getElementById('thevideo');
var thumb=document.getElementById('thumb');
var playing = 1;
function playvid(){
thevid.style.display='block';
thumb.style.display='none'; document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio');
aud.pause();
playing = 0;
thevid.onended = function(){
aud.play();
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<audio id="myAudio" autoplay loop>
<source src="http://www.rachelgallen.com/monkey.mp3">
</audio>
<div class="video">
<div id="thumb">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" onclick='playvid();' />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to get my video to play when I click on the .gif.
I have tried multiple snipits, and coding it myself, but have not found a solution yet.
<div class="video" id="videoplayer">
<img src="images/gifisdone.gif">
<!-- <iframe width="940" height="529" src="https://www.youtube.com/embed/oUflzV5z9sc" frameborder="0" allowfullscreen></iframe>-->
</div>
Should be fairly simple. Just add a click call to the gif and then load the video. Run the snippet below to test it out.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="video" id="videoplayer">
<img src="https://media.giphy.com/media/H6niY8viJQvjYRJ7OD/giphy.gif" id="videolink1">
</div>
<div id="divVideo">
<iframe width="420" height="345" >
</iframe>
</div>
</body>
<script>
$('#videolink1').click(function(event) {
var videoFile = 'https://www.youtube.com/embed/tgbNymZ7vqY'+'?&autoplay=1';
$('#divVideo iframe').attr('src', videoFile);
});
</script>
</html>
I want to play a sound when the cursor hits an image. I tried to use javascript. the <audio>-tag is working, when I say <audio autoplay> the soundfile is played. See code below.
Plus, I want the sound to be repeated as long as one is hovering.
I used this tutorial: Play Sound on :hover
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="div4">
<img class="bottom" src="dcim/20190202_102432 copy.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio>
<source src="div4.mp3"></source>
</audio>
</div>
<script>
var audio = $("#div4.mp3")[0];
$("div4").mouseenter(function() {
audio.play();
});
</script>
</body>
Here is working code:
add id/class to <audio> and select the DOM in script as var audio = $("#audio")[0];
Use <source src="..."/> and NOT <source src="..."></source>
Check if your src works
var audio = $("#audio")[0];
$("#div4").mouseenter(function() {
audio.play();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div4">
<img class="bottom" src="dcim/20190202_102432 copy.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio id="audio">
<source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
</audio>
</div>
EDIT to your comment
1) I want the sound to be repeated as long as one is hovering;
2) I want the sound to stop, when the mouse leaves the image
var audio = $("#audio")[0];
$("#div4").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#div4").mouseleave(function() {
audio.pause();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div4">
<img class="bottom" src="dcim/20190202_102432 copy.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio id="audio">
<source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
</audio>
</div>
You need to target the div <div id="div4">:
$("#div4").mouseenter(function() {...});
And your audio should be the audio <audio>:
var audio = $("audio");
You need to attach an eventListener to the object that should trigger the playback of the audio like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div4">
<img class="bottom" src="dcim/20190202_1024322.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio id="audio4">
<source src="div4.mp3"></source>
</audio>
</div>
<script>
var div4 = document.querySelector('#div4')
var audio = document.querySelector('#audio4')
div4.addEventListener("mouseenter", function(){
audio.play()
});
div4.addEventListener("mouseout", function(){
audio.pause()
});
</script>
</body>
</html>
My problem is when I display <video> by clicking on the first button and click on another button without toggling the first button, the two videos are displaying together, how i solve it?
When I click to another button, I want the first button to be closed and hidden automatically.
JavaScript code:
<script>
function display(id) {
var vid = document.getElementById(id);
if (vid.style.display == 'block') {
vid.style.display = 'none';
vid.pause();
} else {
vid.style.display = 'block';
}
}
</script>
HTML code:
<section class="vid">
<h3>Double click on the buttons to display the videos:</h3>
<div><a onclick="display('ch1');"><span>Video tutorual Ch1</span></a></div>
<div><a onclick="display('ch2');"><span>Video tutorial Ch2</span></a></div>
<div><a onclick="display('ch3');"><span>Video tutorial Ch3</span></a></div>
<div><a onclick="display('ch4');"><span>Video tutorial Ch4</span></a></div>
<div><a onclick="display('ch5');"><span>Video tutorial Ch5</span></a></div>
<div><a onclick="display('ch6');"><span>Video tutorial Ch6</span></a></div>
</section>
<video controls="" height="600px" id="ch1" src="V.mp4" width="940px"></video>
<video controls="" height="600px" id="ch2" src="V.mp4" width="940px"></video>
<video controls="" height="600px" id="ch3" src="V.mp4" width="940px"></video>
<video controls="" height="600px" id="ch4" src="V.mp4" width="940px"></video>
<video controls="" height="600px" id="ch5" src="V.mp4" width="940px"></video>
<video controls="" height="600px" id="ch6" src="V.mp4" width="940px"></video>
In your click function, you need to first stop all the videos, then show and play the one video which is selected by the user via click function parameter.
Sample code is below, can help to enhance further. You can call the hideAndStopAll() method to stop and hide them all while the page is loaded.
function display(id) {
hideAndStopAll()
var vid = document.getElementById(id);
vid.style.display = 'block';
vid.play();
}
var ids= ['ch1','ch2','ch3','ch4','ch5','ch6']
function hideAndStopAll(){
for(i=0;i<ids.length;i++){
var video = document.getElementById(ids[i]);
video.pause();
video.style.display='none'
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div> <a onclick="display('ch1');"> <span>Video tutorual Ch1</span> </a> </div>
<div> <a onclick="display('ch2');"> <span>Video tutorial Ch2</span> </a> </div>
<div> <a onclick="display('ch3');"> <span>Video tutorial Ch3</span> </a> </div>
<div> <a onclick="display('ch4');"> <span>Video tutorial Ch4</span> </a> </div>
<div> <a onclick="display('ch5');"> <span>Video tutorial Ch5</span> </a> </div>
<div> <a onclick="display('ch6');"> <span>Video tutorial Ch6</span> </a> </div>
<video id="ch1" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls width="940px" height="600px"> </video>
<video id="ch2" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls width="940px" height="600px"> </video>
<video id="ch3" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls width="940px" height="600px"> </video>
<video id="ch4" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls width="940px" height="600px"> </video>
<video id="ch5" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls width="940px" height="600px"> </video>
<video id="ch6" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls width="940px" height="600px"> </video>
</body>
</html>
So, I've had some issues with this. Simply put, I want to have a play button on my webpage which plays TWO files simultaniously. The files are Jazz.ogg with Jazz.mp3 and Rain.ogg with Rain.mp3. The play button in the HTML is put such as;
<div class="play">
<img src="play.png" style="height: 100%; width: 100%;">
</div>
I have a bit of experience with HTML and CSS, but when it comes to Javascript, I'm as much of use as the font-stretch element.
This is an html5 solution.
Music will be played only once you clicked the play image.
<body>
<script>
function playMusic() {
var jazzMusic = document.getElementById("audio-jazz");
jazzMusic.play();
var rainMusic = document.getElementById("audio-rain");
rainMusic.play();
}
</script>
<div class="play">
<img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();">
</div>
<audio id="audio-jazz" src="Jazz.ogg"></audio>
<audio id="audio-rain" src="Rain.ogg"></audio>
</body>
Make sure to add the right path to your .ogg files.
Something like this should work for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin audio test</title>
</head>
<body>
<div id="play">
<img src="play.png" style="height: 100%; width: 100%;">
</div>
<audio id="audio-jazz">
<source src="jazz.ogg" type="audio/ogg">
<source src="jazz.mp3" type="audio/mpeg">
</audio>
<audio id="audio-rain">
<source src="rain.ogg" type="audio/ogg">
<source src="rain.mp3" type="audio/mpeg">
</audio>
<script>
var playButton = document.getElementById('play');
var rainAudio = document.getElementById('audio-rain');
var jazzAudio = document.getElementById('audio-jazz');
playButton.onclick = function(){
rainAudio.play();
jazzAudio.play();
return false;
};
</script>
</body>
</html>
Here is a working (simplified) example: https://jsbin.com/yikifozedi/1/edit
Have problem with moving page to the top when I show or hide items. I want to show and hide containers simultaneously force site to don't scroll it up to the top when action of showing / hiding is triggered.
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
p{
padding: 400px 0px;
}
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<html>
<body>
<p>Lorem ipsum</p>
Movie 1
<div id="movie1" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie1.avi" type="video/avi">
too old browser.
</video>
</div>
<br/>
Movie 2
<div id="movie2" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie2.avi" type="video/avi">
too old browser.
</video>
</div>
</body>
</html>
How to prevent this move? Is there any other solution or I need to change toggle script?
Try this out:- http://jsfiddle.net/adiioo7/ftqo2z68/
Remove href=# from anchor tags.
JS:-
function toggle_visibility(id) {
$("#"+id).toggle();
}
HTML:-
<p>Lorem ipsum</p> <a onclick="toggle_visibility('movie1');">Movie 1</a>
<div id="movie1" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie1.avi" type="video/avi">too old browser.</video>
</div>
<br/> <a onclick="toggle_visibility('movie2');">Movie 2</a>
<div id="movie2" hidden>
<video id="ad" width="1920" height="1080" controls>
<source src="video/movie2.avi" type="video/avi">too old browser.</video>
</div>