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>
Related
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>
In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.
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>
When my checkboxes are checked, they don't hide their respective videos. What am I doing wrong?
My code
<html>
<head>
<script type="text/javascript">
function hide1() {
document.getElementById('vid1').style.visibility='hidden';
document.getElementById('vid1').style.display='none';
}
function show1() {
document.getElementById('vid1').style.visibility='visible';
document.getElementById('vid1').style.display='block';
}
</script>
</head>
<body>
<iframe width="560" height="315" id="vid1" src="https://www.youtube.com/embed/2Tvy_Pbe5NA" frameborder="0" allowfullscreen> </iframe>
<p>
Hide Video <input type="checkbox" onclick="hide1()" /> |
Show Video <input type="checkbox" onclick="show1()" /></p>
</body>
</html>
The problem was simply a lack of brackets to end some of my original functions.
I'm looking for a very simple and straightforward image slideshow. No extra features just a selection of images fading in and out. Potrait and Landscapes need to be shown in their full size without any scrollbars being enabled. I managed to find this one:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script>
</head>
<body>
<div id="slideshow">
<img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
<img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>
</body>
However it doesn't seem to want to work though. All it does it renders the images on after another.
Apologies in advance I haven't played with HTML in a while and I don't have much experience regarding JavaScript.
Many thanks in Advance!
Harry
I don't know if this might help you
HTML
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" />
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
SlideShow();
});
function SlideShow() {
$('#slideshow > div:gt(0)').hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(6000)
.next()
.fadeIn(6000)
.end()
.appendTo('#slideshow');
}, 6000);
}
LINK
http://jsbin.com/duyoyuyiwu/1/edit?html,js,output