I used a nice youtube video in Revolution Slider on my Wordpress Site.
Today I updated Revolution Slider, because it wouldn't autoplay the video anymore in Google Chrome.
With the update (5.4.8) the video works again, but there is no sound.
The mute-feature is toggled to 'off'. Flipping is has no effect.
IMPORTANT NOTE: New Browser/Device restrictions for Autoplay Video
Videos with sound are no longer allowed to autoplay in Chrome, Safari and mobile devices. Because of this, Slider Revolution will automatically mute videos in these cases.
Source : video-not-showing-up-on-mobile
Solution :
Here is how you can enable sound on mobile devices..
We are using javascript to enable sound
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var v = document.getElementsByTagName('video');
// check for the element to exist in dom
var checkExist = setInterval(function() {
if (v.length) {
// run this code as soon as the element added to the dom
var isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (isMobile.matches) {
if(typeof v[0] != undefined){
v[0].autoplay = false; // you can change this as needed [true/false]
v[0].defaultMuted = false; // disable defaulMute
v[0].muted = false; // disable mute(enable sound)
v[0].play(); // play the video
}
}
clearInterval(checkExist);
}
}, 100);
});
</script>
Related
I have setup a custom script on the first product image that uses the dragging events. But now, when I drag - the slider starts functioning. I have figured out how to disable the dragging after the page has loaded (through firebug). But how can I disable right after it's been setup by woocommerce?
I tried this:
flickityInterval = setInterval('disableGalleryDrag()', 1000);
function disableGalleryDrag(){
//disable draggable for gallery
$carousel = jQuery(".product-gallery-slider").flickity();
var flkty = $carousel.data('flickity');
flkty.options.draggable = false;
flkty.updateDraggable();
clearInterval(flickityInterval);
}
But it works only partially for some reason. A little dragging does not initiate the slider dragging, but if you do a bigger slide it does.
Figured it out. Just needed to handle the errors.
flickityInterval = setInterval('disableGalleryDrag()', 1000);
function disableGalleryDrag(){
try {
//disable draggable for gallery
$carousel = jQuery(".product-gallery-slider").flickity();
var flkty = $carousel.data('flickity');
flkty.options.draggable = false;
flkty.updateDraggable();
clearInterval(flickityInterval);
}
catch(err) {
}
}
window.matchMedia is working, but I thought it would work like using '#media only screen and' works where when the screen is narrowed it happens. With window.matchMedia the screen has to be loaded or refreshed if you're on a desktop browser for example. Is there a way to have window.matchMedia working like #media CSS where it just happens automatically when you increase or decrease the screen-width without the need for the screen to be refreshed or (re)loaded?
Example below being used on: Americastributetoparis.com
jQuery(document).ready(function($) {
if (window.matchMedia("(max-width: 800px)").matches) {
// phone
$(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);
} else {
//tab or desktop
$(".front-page-1").backstretch([BackStretchImg.src]);
}
});
Found this researching my questions on a search engine and applied it:
media query not just on run time, but also when any changes to the window state occur
jQuery(document).ready(function($) {
var mql = window.matchMedia("(max-width: 800px)")
mediaqueryresponse(mql) // call listener function explicitly at run time
mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes
function mediaqueryresponse(mql){
if (mql.matches){ // if media query matches
// phone
$(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);
} else {
//tab or desktop
$(".front-page-1").backstretch([BackStretchImg.src]);
}
}
});
I am using youtube api iframe and just getting going with the sample code. When I issue:
player.loadVideoById("ytidNo1") the proper video starts ("ytidNo1" is a valid youtube id)
Then, say, 10 seconds later, if I issue another:
player.loadVideoById("ytidNo2") the 2nd video starts, but it starts at the point where the last one was playing at (eg 10 seconds in).
This is new behavior in the last day or so and I have not changed my code.
To correct the problem, I tried:
player.loadVideoById("ytidNo1",0)
then
player.loadVideoById("ytidNo2",0)
and issue still happens.
Anyone else have or just starting to have this issue?
I also had the same problem. Playing around I eventually got it to work.
I had to use seekTo(0); (see Jim's comments)
More details about the problem.
If the video actually played to the end I didn't need to do anything.
If the video was skipped part way through I had to call
player.seekTo(0);
on the old video before calling loadVideoByID("ytid", 0); on the next video.
I also had to handle the case where after calling loadVideoByID I got an error. (e.g. 150) If I had an error I could not call seekTo because it would cause the next video to play audio only.
hope this helps
I am trying to reproduce the issue using the official sample::
https://developers.google.com/youtube/iframe_api_reference
after the stop I am selecting another video in the same way, and seems to work well:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
player.loadVideoById("tYrND5hMY3A");
}
</script>
</body>
</html>
http://jsfiddle.net/5wxFv/3/
I have an asp.net page with an tag in it. If I enable controls (controls="controls") I can play the audio assigned to the tag. I just want to show my own button to play the audio, so I added a simple html button with a javascript function to hit the .play method:
<button id="LeftAudio" class="Audio" onclick="playAudio1()"></button>
function playAudio1() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
//debugger;
var oAudio = document.getElementById('dnn_ctr<%=ModuleId.ToString(CultureInfo.InvariantCulture) %>_ViewUFL_Book_audio1');
oAudio.volume = 1.0;
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
debugger;
}
else {
oAudio.pause();
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
The audio plays fine when I step through the javascript (Chrome/Windows), but will not play at all if I am not debugging. I tried putting the debugger; statement before the play command and stepping through the code, and putting it after the play command - both work. Just doesn't work if I let it run normally.
Any ideas??
I just made it on Fiddle and its working for me.
Here is the test on Fiddle: http://jsfiddle.net/jwCXV/4/
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.