I am using Reveal Modal (http://zurb.com/playground/reveal-modal-plugin) to fire off a modal pop-up box on the visitor's first visit only, setting a cookie using jQuery Cookie (https://github.com/carhartl/jquery-cookie).
Here is the code for the modal (shows a GIF on mobile devices):
<div id="myModal" class="reveal-modal">
</div>
<script type="text/javascript">
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
var myModal = document.getElementById('myModal');
if(!isMobile) {
// User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
myModal.innerHTML += '<video autoplay>' +
'<source src="video/LogoOpening.mp4" type="video/mp4"/>' +
'<source src="video/LogoOpening.ogg" type="video/ogg"/>' +
'<source src="video/LogoOpening.webm" type="video/webm"/>' +
'</video>' +
'<a class="close-reveal-modal"><div class="button4">Close</div></a>';
} else {
myModal.innerHTML += '<img src="images/ThroughTheYears.gif" alt="Logo History" />' +
'<a class="close-reveal-modal"><div class="button4">Close</div></a>' +
'</div>';
}
</script>
...and here is the Javascript that fires off the modal after checking for the cookie:
<script>
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 30, path: '/' });
$('#myModal').reveal({
animation: 'fade', //fade, fadeAndPop, none
animationspeed: 500, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
}
});
</script>
So, here's the issue: when my visitor shows up the first time, the video fires off perfectly and plays automatically, just like it should (a similar animated GIF plays on mobile devices only); however, the video has sound, and on subsequent visits the video autoplays and you hear the audio, but the modal doesn't visually fire off (the modal and video stays hidden).
I think the solution would be to somehow tie the video's mute attribute to the cookie checking Javascript (which determines whether the modal fires or not), but I'm not sure how to code that. Help?
something like this should work
if (!isMobile) {
// User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
if ($.cookie('modal_shown') == null) {
myModal.innerHTML += '<video autoplay controls>'
} else {
myModal.innerHTML += '<video autoplay muted controls>'
}
myModal.innerHTML += '<source src="video/LogoOpening.mp4" type="video/mp4"/>' +
....
....
'</video>' +
... adding the extra check for the cookie model_shown allows you to change if the video will autoplay, or will autoplay but be muted (if you would prefer it not to autoplay you could remove that, in which case the muted may also not be needed. I also added the controls so the user can control volume or play/pause manually if desired
hope this helps (if not quite what you need just comment and I'll try and get closer)
Related
I've been setting up a video page for my website and I'm trying to make it extra slick by using Javascript!... Unfortunately, I completely suck at Javascript! Ok, so here's my problem:
I've managed to make a modal box with an opening animation using HTML and CSS, now what I want to happen is as soon as I click the video thumbnails the video starts playing and when I click the close button, the video stops playing or pauses, I've managed to make it work using "onclick" commands... but it only works for one video!
I've tried setting up videos with multiple ids and multiple JS vars but none of them work, at some point I made it so all of the videos started playing at once even though I only had one modal box open... lol
Here's a snipet of my current code:
<!-- Open the Lightbox with these images -->
<div class="row">
<div class="column">
<img src="tsr/teaserthumbnail.png" onclick="openModal();currentSlide(1);playVid()" class="hover-shadow">
<img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(1);playVid()">
</div>
<div class="column">
<img src="tsr/e3thumbnail.png" onclick="openModal();currentSlide(2);playVid()" class="hover-shadow">
<img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(2);playVid()">
</div>
</div>
<!-- Modal/Lightbox Content -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal();pauseVid()">×</span>
<div class="modal-content">
<div class="mySlides">
<center><video id="myVideo" width="100%" controls src="tsr/TSR_TeaserMovie_PEGI_ENG_1527074582.mp4"></video></center>
</div>
<div class="mySlides">
<center><video id="myVideo" width="100%" controls src="tsr/TSR_E3_Trailer_UK_PEGI_1528474075.mp4"></video></center>
</div>
<script>
// Open the Modal
var vid = document.getElementById("myVideo");
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function playVid() {
vid.play();
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
function pauseVid() {
vid.pause();
}
Here's the webpage itself if you need anymore context:
https://sonic.retro-media.net/videos/tsr.php
All I really need is for each video to start playing when I click the thumbnail or pause when I close the modal/lightbox.
Thanks in advance!
Can you just call playVid() from the openModal() when that function is running?
One solution you can try is to set autoplay=1 when the modal is opened too, that way the video starts playing. You can do the same to stop the video when 'closeModal()' is called by setting autoplay=0.
This is how you would add the autoplay to the current src of the video if it's in an iframe:
vid.src = vid.src + (vid.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';
Here is a more complete version of the code.
var autoplayVideo = function (modal) {
// Look for a YouTube, Vimeo, or HTML5 video in the modal
var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');
// Bail if the modal doesn't have a video
if (!video) return;
// If an HTML5 video, play it
if (video.tagName.toLowerCase() === 'video') {
video.play();
return;
}
// Add autoplay to video src
// video.src: the current video `src` attribute
// (video.src.indexOf('?') < 0 ? '?' : '&'): if the video.src already has query string parameters, add an "&". Otherwise, add a "?".
// 'autoplay=1': add the autoplay parameter
video.src = video.src + (video.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';
};
Now to stop the video when the modal closes:
/**
* Stop a YouTube, Vimeo, or HTML5 video
* #param {Node} modal The modal to search inside
*/
var stopVideo = function (modal) {
// Look for a YouTube, Vimeo, or HTML5 video in the modal
var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');
// Bail if the modal doesn't have a video
if (!video) return;
// If an HTML5 video, pause it
if (video.tagName.toLowerCase() === 'video') {
video.pause();
return;
}
// Remove autoplay from video src
video.src = video.src.replace('&autoplay=1', '').replace('?autoplay=1', '');
};
Don't forget to expose the button/thumbnail and the modal as arguments
modals.init({
callbackOpen: function ( toggle, modal ) {
autoplayVideo(modal);
},
callbackClose: function ( toggle, modal ) {
stopVideo(modal);
}
});
Let me know if this works!
Cheers!
I figured it out!
The solution was rather simple too, all I had to do to was edit the code to:
<script>
function playVid(vidID) {
var vid = document.getElementById(vidID);
vid.play();
}
function pauseVid(vidID) {
var vid = document.getElementById(vidID);
vid.pause();
}
</script>
Now all I had to do was change my video IDs accordingly, in this case 'myVideo1' and 'myVideo2'!
Thank you for your help!
Firefox - https://support.mozilla.org/en-US/kb/block-autoplay
Chrome - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
autoplay is going to be turned off (more like, it's already off) by default on all major browsers, unless the user changes the browser autoplay settings.
I want to put the background music on the website and pause/play the music by a custom botton.
First I used the <audio>, but chrome doesn't allow it to autoplay. So now I combine <audio> and <iframe> to make the music autoplay. But I don't know how to pause/play the music by <iframe>.
Here's my code.
<script>
var musicIframe = document.getElementById("iframeAudio");
var musicAudio = document.getElementById("audioAudio");
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (!isChrome) {
$('#iframeAudio').remove();
$("#music__btn--id").click(function() {
if (musicAudio.paused) {
musicAudio.play();
$("#music__btn--id").removeClass("music__pause").addClass("play"); // change to the play button
} else {
musicAudio.pause();
$("#music__btn--id").removeClass("play").addClass("music__pause"); // change to the pause button
}
});
} else {
$('#audioAudio').remove();
$("#music__btn--id").click(function() {
if (musicIframe.paused) {
$("#iframeAudio").attr("src", "./images/music.mp3");
$("#music__btn--id").removeClass("music__pause").addClass("play"); // change to the play button
} else {
$("#iframeAudio").removeAttr("src");
$("#music__btn--id").removeClass("play").addClass("music__pause"); // change to the pause button
}
});
}
</script>
<div class="music">
<a class="music__btn" id="music__btn--id"></a>
<iframe id="iframeAudio" src="./images/music.mp3" allow="autoplay" style="display:none"></iframe>
<audio id="audioAudio" src="./images/music.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
And when I use IE to open the page, it shows up a small player window, How can I disable it?
We have some videos playing great in our HTML mobile app. However, our videos don't have sound, just subtitles, so we need to remove the volume slider and mute button but keep the timer bar.
Can this be done or toggled with HTML or CSS? Or is some javascript required to do this?
At the moment the setting within our html tag is just: controls="controls"
This has worked:
video::-webkit-media-controls-volume-slider {
display:none;
}
video::-webkit-media-controls-mute-button {
display:none;
}
Super easy:
Your html should be something like:
<video id="Video1">
<source src="..." type="video/mp4">
<source src="..." type="video/ogg">
Your browser does not support HTML5 video.
</video>
Add then a customized button to play the video:
<button id="play" onclick="vidplay()">></button>
Finally a progress bar:
<progress id="progressbar" value="0" max="100"></progress>
Then in javascript add a button to play
var video = document.getElementById("Video1");
function vidplay() {
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
And a listener to update the progress bar:
video.addEventListener('timeupdate', updateProgressBar, false);
function updateProgressBar() {
var progressBar = document.getElementById('progressbar');
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
progressBar.value = percentage; progressBar.innerHTML = percentage + '% played';
}
So basically remove the "standard controls" and create your own ones.
If you wanted to achieve more complicated results, I would recommend you another option. This could be using a more configurable setting such as video.js.
Remove the controls attribute from the video element completely.
Try Here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls. Remove the "controls" attribute and the bar will disappear.
i have many links in my page each with two attributes that are format & src.
<a class="play" src="'.$p['video_path'].'" format="'.$p['video_type'].'"></a>
what its clicked i get its 2 attr and make HTML in js like this.
$(".play").live('click',function() {
var src = $(this).attr('src');
var fmt = $(this).attr('format');
var html = '<video width="200" height="240" controls> <source src="'+src +'" type="video/'+ fmt +'"> </video>';
$("#myVideoDiv").html(html);
$.mobile.changePage( $("#myVideoDiv"), { transition: 'pop' } );
});
<div data-role="dialog" id="myVideoDiv"></div>
when i clicked on any video link my browser url changes like this
http://pp.local/maps/maps/40295472#&ui-state=dialog
but nothing displaying just a white screen.
although its working $("#myVideoDiv").html( html ); i can see the HTML through Firbug.
No error or Warning in Firebug:(
Basically what i need to do is that i want to show each video in jquery Mobile dialog like we do in normal jquery UI like the code below.i need to do same thing here too but with jquery mobile dialog.
$(".watchVideo").live('click', function() {
if( $('div.ui-dialog').length ) {
$('div.ui-dialog').remove();
}
var path = $(this).attr('rel');
var title = $(this).attr('title');
var $dialog = $('<div>', {
title: 'Title'
}).dialog({
autoOpen: false,
modal: true,
width: 600,
height: 500,
closeOnEscape: false
});
var tab = '<table id="video_player" style="margin: 10px 10%;"><tr><td><object codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><param value="'+path+'" name="src"><param value="true" name="autoplay"><param value="true" name="controller"><embed pluginspage="http://www.apple.com/quicktime/download/" controller="true" style="height:300px;width:400px;background-color:#D9EBFB" autoplay="true" target="myself" src="'+path+'"></object></td></tr></table>';
$('<div id="updateContent">').html( tab ).appendTo( $dialog );
$dialog.dialog('open');
return false;
});
I have successfully recreated your problem, unfortunately I can't be 100 % sure this is the problem. I think you have a an error with your page/dialog setup.
Take a look at my working example, try to use it in your app: http://jsfiddle.net/Gajotres/5REkc/. This example uses dialog as a video container:
$('#index').live('pagebeforeshow',function(e,data){
$('#show-video').live('click', function(e) {
$('#video-content').append('<video width=450px height=300px controls="controls"><source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type="video/ogg"></video>');
$.mobile.changePage("#second", { transition: "slide"});
});
});
I have also created another example for you. This one is much better and it uses popup as a video container. Unlike dialog popup will resize to accommodate video tag: http://jsfiddle.net/Gajotres/vscrU/.
$('#index').live('pagebeforeshow',function(e,data){
$('#show-video').live('click', function(e) {
$('#popup-video').append('<video width=600px height=300px controls="controls"><source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type="video/ogg"></video>');
$('#popup-video').popup("open");
});
});
<div data-role="popup" id="popup-video" data-tolerance="15,15" class="ui-content"</div>
Data tolerance is here so popup can have a padding. Without it video player is overflowing popup container.
One more thing, I can see you are using php for content generation. In this case popup is much better solution. Unlike dialog (which acts as another page, and is a another page), popup is a part of a single page, so i has a much better usability in server side generation.
WARNING:
My examples will only work in firefox browser. I have used only a ogg video source. Video sources are taken from this post.
I'm building a mobile site and I'm having trouble playing video on android devices. I can get the video to play but find it erratic. Sometimes it causes the browser to crash, other times the controls aren't responsive. Most of my testing is on the Galaxy S3 and Nexus.
The code is a link that you can click to play the video.
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
The javascript/jquery mix (not very optimal, so maybe this is the problem):
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
var video = document.getElementById('myfileplayer');
video.addEventListener('click',function(){
video.play();
},false);
}
I'm not sure what else to debug here. Any ideas?
Thanks to #akonsu he mentioned why I would even need the click event listener? Good point, I don't. I remove that and all the weird behavior is gone.
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}