I've understood how to mute an <audio> sound object by putting this code :
<a href="#" onclick="document.getElementById('ambiance').muted = true; return false">
mute sound
</a>
Now I'm searching how to mute/unmute my sound using the same button with the option to toggle it ?
Can anyone give me directions?
var audioElm = document.getElementById('ambiance'); audioElm.muted = !audioElm.muted;
Try this:
.unmute {
background-image: url(http://franriavilla.in/images/unmute.png);
background-size: cover;
width: 35px;
height: 30px;
cursor: pointer;
}
.mute {
background-image: url(http://franriavilla.in/images/mute.png);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="track" autoplay="autoplay" loop="loop">
<source src="audio/ThemePackNet.mp3" type="audio/ogg" />
</audio>
<div class='unmute' onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>
Related
I have a question about how to play / stop the video when I mouse over. The user placed the mouse over the image and the video started playing in the place of the image, and when it was moved, the image returned and the video disappeared. Is it possible and how? I tried something but I have not got what I want.
$(document).on('ready', function() {
$('.image').on('mouseover', function() {
$('.video-preview').toggleClass('video-preview-show');
})
})
.image img {
width: 272px;
height: 160px;
}
.video-preview {
width: 272px;
}
.video-preview {
display: none
}
.video-preview-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Cycling/Galleries/Cyclists+Should+Never+Do/cyclist-front.jpg">
</div>
<video class="video-preview lazy-hidden" playsinline="" autoplay="" muted="" loop="" width="100%" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
View on Codepen
Try with this
<div onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video width="400px" height="auto" muted id="video1" onmouseover="this.play()" onmouseout="this.pause()">
<source src="http://mazwai.com/system/posts/videos/000/000/140/preview_mp4_2/joel_gerlach--rain-shot_in_los_angeleswith_the_panasonic_gh4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Try the below code. This will help you
$('.image').hover(function() {
$('.video-preview').addClass('video-preview-show');
},
function() {
$('.video-preview').removeClass('video-preview-show');
});
I am trying to play video while hovering over images at the same div in my website's img-gallery but obviously i am doing something wrong.
The supposingly hidden image over which the video should play on mouseover starts trempling.
I think its something obvious but i don't have enough experience to solve it.
Is there any idea how to hide the image at hovering for good?
Here is the code:
HTML
<div id="container">
<div class="viewer">
<img class="thumb" target="#video_1" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_2" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_3" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
CSS
.viewer {
width: 530px;
height: 290px;
display:inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
JS
$(document).ready(function() {
$('.thumb')
.mouseover(function() {
$(this).hide();
var myVid = $(this).attr('target');
$( myVid ).show().trigger('play');
})
.mouseout(function() {
$('video').trigger('pause').hide()
$(this).show();
});
});
Here is also a saved [PEN]:https://codepen.io/anon/pen/oEwRJQ
The issue with your code is because you're hiding the .thumb element in the mouseover event which immediately triggers the mouseout event which shows it again. This causes a loop of hiding/showing which results in the flickering you see.
To fix this, hook the event to a parent element of both the thumb and the video. That way you don't need to use the non-standard target attribute and can instead find the related video element using DOM traversal, making the code more extensible and robust. You can also use the mouseenter and mouseleave events to prevent any possible flickering when near the edges of the hit area.
$(function() {
$('.viewer').mouseenter(function() {
var $el = $(this);
$el.find('.thumb').hide();
$el.find('video').show()[0].play();
}).mouseleave(function() {
var $el = $(this);
$el.find('.thumb').show();
$el.find('video').hide()[0].pause();
});
});
.viewer {
width: 530px;
height: 290px;
display: inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
$(document).ready(function() {
$('.viewer').each(function(){
var $this = $(this);
$this.mouseover(function() {
$(this).find('.thumb').hide();
$('video', $this).show().trigger('play');
})
$this.mouseout(function() {
$('video', $this).trigger('pause').hide()
$(this).find('.thumb').show();
});
});
});
I wrote a small code using videojs library which plays ads video before playing actual video. I wanted a div tag which should appear on ad video and it works just fine the only problem is when the video goes fullscreen the label doesn't show up.
Here's my html code
<div class="videoContainer">
<video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''>
<!-- ad source ad ad video url -->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' />
</video>
<!-- text to be displayed while playing ad -->
<div class="advertisement hide">Advertisement</div>
</div>
CSS Code:
.videoContainer {
max-width: 300px;
position: relative;
margin: 20px auto 0;
}
.advertisement{
position:absolute;
color: rgb(230, 200, 98);
padding: 5px 10px;
text-align: right;
background: rgba(0, 0, 0, 0.4);
bottom: 50px;
right:0;
font-size: 14px;
font-weight: 700;
z-index: 1 !important;
}
.hide{
display:none;
}
And Javascript Code is:
$(document).ready(function(){
var videotag = $('.playads');
var myPlayer = videojs('video_1');
// show advertisement label while play advertisement
myPlayer.on('play', function() {
if(myPlayer.hasClass("playads")){
$('.advertisement').removeClass('hide');
}
});
// Stop from seeking while playing advertisement
myPlayer.on("seeking", function(event) {
if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) {
myPlayer.currentTime(currentTime);
}
});
myPlayer.on("seeked", function(event) {
if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) {
myPlayer.currentTime(currentTime);
}
});
setInterval(function() {
if (!myPlayer.paused() && myPlayer.hasClass("playads")) {
currentTime = myPlayer.currentTime();
}
}, 1000);
// Hide Advertisement label and change data-src of player to play actual video
myPlayer.on('ended', function() {
if(this.hasClass("playads")){
this.src({type: videotag.attr('mimetype'), src: videotag.attr('video-url')});
this.play();
this.removeClass('playads');
$('.advertisement').addClass('hide');
}
});
});
what am i missing here? is it videojs?
Here is a link to my pen:
https://codepen.io/isheikhspear/pen/RjMOgw?editors=0010
This can be accomplished by moving your argument inside of video.js's wrapper. So your new HTML would be:
<div class="videoContainer">
<!-- Add some extra attribute as video-url and mimetype which we can later play once we are done playing ads -->
<video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''>
<!-- ad source ad ad video url -->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' />
</video>
<!-- text to be displayed while playing ad -->
<div class="moveToVideoJs">
<div class="advertisement hide">Advertisement</div>
</div>
</div>
After initializing your video.js, you should then move your div that contains stuff we want to move to video.js to video.js.
$(".moveToVideoJs")
.appendTo($('#video_1'));
Here's a link to the new CodePen.
So I have my code here, and it works great. Only thing is there are no mute/unmute buttons and I have no idea how to add them.
<audio src="MUSIC URL" autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
I use this, get a play and pause button .png and use them. Then make a folder called audio and put the files in there for you music. I put the play and pause in a folder called images.
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>
<audio controls loop>
<source src="**your website url here**/audio/waves.ogg" type="audio/ogg">
<source src="**your website url here**/audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="**your website url here**/images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
snd = document.getElementsByTagName('audio')[0],
ctrl = document.getElementById('pauseplay');
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
if(playing){snd.autoplay = false; ctrl.src = '**your website url** here/images/pause.png';}
ctrl.addEventListener('click', function(){
if(playing){
snd.pause();
} else {
snd.play();
}
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
ctrl.src = playing? '**your website url here**/images/pause.png' : '**your website url here**/images/play.png';
}, false);
})();
</script>
If you want to see it live look at this site I made.
You should add controls attribute to audio tag.
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
developer.mozilla
<audio src="http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9" controls>
<p>Your browser does not support the audio element </p>
</audio>
Very easy:
<button onclick="document.getElementsByTagName('audio')[0].play();">Sound on</button>
<button onclick="document.getElementsByTagName('audio')[0].pause();">Sound off</button>
<audio autoplay preload="auto" loop src="your.mp3"></audio>
It is set on autoplay and loop, you can pause and resume by clicking the buttons. The best way to avoid diplaying the unsuitable browser player.
I'm making an interactive world map gif, using javascript and html5, here is my code so far:
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" href="
but now I'm stuck, firstly i want to know how to link to a video within the html5 video tags, upon the clicking of the linked coordinates, and also how to set javascript parameters within this, such as swapping videos etc. I have the code to be able to do the swap with the videos once the link is clicked, and I have the code to do the coordinates, I just don't know how to put it together.
Thanks so much for you help, but want to keep it super simple using the method i've done and kind of understand (if it works) here is my super simple code
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" <video src="ukanthem.mp4"></video>
</map>
</body>
</head>
</html>
the map opens on the page, but the clickable area does not appear to be there?
UPDATE:
So the coordinates still don't work, there is no area to click
also the video's appear on the same page as my map, I would like them on a seperate page, any help? also the video's aren't recognised, it says "video cannot be found, may have been removed from the server. http 404"
World Map
Click on a clickable area of the map for more info.
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" onclick="playVideo()">
<video id="video1" class="true" autoplay controls width="420">
<source src="ukanthem.mp4" type="video/mp4">
<source src="ukanthem.mp4" type="video/ogg">
</video>
<video id="video2" class=flase" width="420" controls>
<source src="beef.mp4">
</video>
<button id="hideButton" onclick="swap();">Switch</button>
<script>
var flag=true;
function swap() {
var myVideo1=document.getElementById("Video1");
var myVideo2=document.getElementById("video2");
flag=!flag;
video1.setAttribute("class", flag);
video2.setAttribute("class", !flag);
if (flag) {
video2.pause();
video1.play();
} else {
video1.pause();
video2.play();
}
}
</script>
</map>
</body>
</head>
</html>
Look at my code again please :)
Ok super simple.
You can put an Onclick action to your area tag.
Like this.
<area .... onclick="playVideo()">
And for your HTML 5 video tag...
<video id="video1" width="420">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
And a Javascript to do things for you:
This part is for the normal HEAD HTML tag <-------
<script>
function playVideo() {
var myVideo=document.getElementById("video1");
myVideo.play();
}
</script>
If you want it super easy this is super easy, and i havent used any jquery, or new stuff. Let me know how it goes :)
You need a video tag:
<video src="urlofvideo"></video>
You can use jQuery to bind the click events on the image map:
jQuery(document).ready(function($) {
$('area').bind('click', function(event) {
event.preventDefault();
//url of video
var url = this.href;
//Here your code to start the video
...
});
});
Im not 100% sure i understood your question, but i made you this. Its a map with cords on, this is without the old map method, but its with HTML, CSS and Jquery instead.
Sorry if i totally misunderstood, but its my shoot :)
<style type="text/css">
.map_image { display: block; width: 1280px; height: 960px; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #paris { width: 150px; height: 80px; top: 11px; left: 11px; border: 1px solid red; }
.map_image #copenhagen { width: 150px; height: 80px; top: 40px; left: 177px; border: 1px solid yellow;}
</style>
<div class="map_image" style="background-image: url('your_picture.jpg');">
<a class="map_link" id="paris" title="google.com"></a>
<a class="map_link" id="copenhagen" title=""></a>
</div>
<script>
$("#paris").click(function() {
// play a video about paris
alert("paris");
});
$("#copenhagen").click(function() {
// play a video about paris
alert("copenhagen");
});
</script>