Bonjour,
Je souhaiterais faire un bouton on/off sur mon site (dans le meme style que ce site la : http://www.powergloveaudio.com/)
J'ai monté mon site sur wordpress, j'ai integré ma video avec un plugin Jquery (je ne sais d'ailleur pas comment j'ai fait xD) du coup le son se coupe quqnd je clique sur l'image. Mais j'aurais besoin de vous pour faire changer l'image.
Je ne sais pas si cela sera assez clair mais est-ce quelqu'un peut me guider
Merci beaucoup
Voici mon code Jquery pour lancer la video.
Voici mon code Jquery qui appelle ma fontion
et voici le code que j'ai rajouté pour changer l'image et qui ne marche pas.
Voici le code html que j'ai integré dans un widget
Et enfin le css
Modifié par ginie0612 (27 Jul 2017 - 07:49)
Je souhaiterais faire un bouton on/off sur mon site (dans le meme style que ce site la : http://www.powergloveaudio.com/)
J'ai monté mon site sur wordpress, j'ai integré ma video avec un plugin Jquery (je ne sais d'ailleur pas comment j'ai fait xD) du coup le son se coupe quqnd je clique sur l'image. Mais j'aurais besoin de vous pour faire changer l'image.
Je ne sais pas si cela sera assez clair mais est-ce quelqu'un peut me guider
Merci beaucoup
Voici mon code Jquery pour lancer la video.
(function ($, window) {
// test for feature support and return if failure
// defaults
var defaults = {
ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
videoId: 'RxJG5rmQusQ', // toy robot in space is a good default, no?
repeat: true,
width: $(window).width(),
wrapperZIndex: 99,
playButtonClass: 'tubular-play',
pauseButtonClass: 'tubular-pause',
muteButtonClass: 'tubular-mute',
volumeUpClass: 'tubular-volume-up',
volumeDownClass: 'tubular-volume-down',
increaseVolumeBy: 10,
start: 0
};
// methods
var tubular = function(node, options) { // should be called on the wrapper div
var options = $.extend({}, defaults, options),
$body = $('body') // cache body node
$node = $(node); // cache wrapper node
// build container
var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';
// set up css prereq's, inject tubular container and set up wrapper defaults
$('html,body').css({'width': '100%', 'height': '100%'});
$body.prepend(tubularContainer);
$node.css({position: 'relative', 'z-index': options.wrapperZIndex});
// set up iframe player, use global scope so YT api can talk
window.player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('tubular-player', {
width: options.width,
height: Math.ceil(options.width / options.ratio),
videoId: options.videoId,
playerVars: {
controls: 0,
showinfo: 0,
modestbranding: 1,
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
window.onPlayerReady = function(e) {
resize();
if (options.mute) e.target.mute();
e.target.seekTo(options.start);
e.target.playVideo();
}
window.onPlayerStateChange = function(state) {
if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
player.seekTo(options.start); // restart
}
}
// resize handler updates width, height and offset of player after resize/init
var resize = function() {
var width = $(window).width(),
pWidth, // player width, to be defined
height = $(window).height(),
pHeight, // player height, tbd
$tubularPlayer = $('#tubular-player');
// when screen aspect ratio differs from video, video must center and underlay one dimension
if (width / options.ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * options.ratio); // get new player width
$tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / options.ratio); // get new player height
$tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
}
}
// events
$(window).on('resize.tubular', function() {
resize();
})
$('body').on('click','.' + options.playButtonClass, function(e) { // play button
e.preventDefault();
player.playVideo();
}).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
e.preventDefault();
player.pauseVideo();
}).on('click', '.' + options.muteButtonClass, function(e) { // mute button
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
}).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
e.preventDefault();
var currentVolume = player.getVolume();
if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
player.setVolume(currentVolume - options.increaseVolumeBy);
}).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
e.preventDefault();
if (player.isMuted()) player.unMute(); // if mute is on, unmute
var currentVolume = player.getVolume();
if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
player.setVolume(currentVolume + options.increaseVolumeBy);
})
}
// load yt iframe js api
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// create plugin
$.fn.tubular = function (options) {
return this.each(function () {
if (!$.data(this, 'tubular_instantiated')) { // let's only run one
$.data(this, 'tubular_instantiated',
tubular(this, options));
}
});
}
})(jQuery, window);Voici mon code Jquery qui appelle ma fontion
$('document').ready(function() {
var options = { videoId: 'RxJG5rmQusQ', start: 3 };
$('#wrapper').tubular(options);
});et voici le code que j'ai rajouté pour changer l'image et qui ne marche pas.
$('document').ready(function() {
$('.js-mute-audio').click(function() {
$(this).toggleClass("is-mute");
}
});
Voici le code html que j'ai integré dans un widget
<em class="mute-audio tubular-mute js-mute-audio is-mute" title="Mute audio">mute audio</em>Et enfin le css
.mute-audio {
background: rgba(0, 0, 0, 0) url(".../images/audio-icon-2x.png") no-repeat scroll center center / 20px 20px;
cursor: pointer;
height: 20px;
opacity: 0.6;
position: absolute;
text-indent: -9999px;
transition: opacity 0.25s ease-in-out 0s;
width: 20px;
z-index: 1000;
margin-left: 6px;
margin-right: 6px;
}
.mute-audio:hover {
opacity: 1;
}
.mute-audio .is-mute {
background: rgba(0, 0, 0, 0) url(".../images/audio-icon-mute-2x.png") no-repeat scroll center center / 20px 20px;}
Modifié par ginie0612 (27 Jul 2017 - 07:49)