Hi I am trying to display a video for my website members but I need to
show a button to submit the form to me confirming that they watched the video fully without any skip
I have difficulty setting the timer to show the button based on the video length not setting a custom time.
I need to set the time based on the video length and stop the timer if the user pauses the video.
here is my code
<div class="embed-responsive embed-responsive-16by9">
<video controls id="myVideo" class="embed-responsive-item" src="/assets/MSFS.mp4" allowfullscreen></video></div>
JS
<script>
$(document).ready(function() {
setTimeout(function() {
$("#proceed").show();
}, 5000);
});
</script>
button
<button id="proceed" type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal">Submit</button>
basically what is happening the button is displayed after 5 seconds I need to change 5 seconds to the length of the video. Is there any way to get the length of the video and set it instead of manually entering it? How to stop the timer if the video pauses?
Thanks
Related
I have a play image with text 'Watch video', when clicked would open up a bootstrap modal window to play the video i put in. I've got the moday view to work. The problem I'm having with this is when I play the video and exit the screen while it is being played, the video continues to play in the background. If I click on the Watch Video link again, it would play the video from where it stopped off previously.
I need to have the video stop when the modal window is closed. It needs to then play the video from the start the next time I click the "Watch video" link. I'm still new to this and am not sure how to do this. Anyone know how I can achieve this?
<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
<img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>
<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I managed to get it to work with the link that #Leo provided. But it was slow as it reloaded the frame everytime the link was clicked. Tried #guillesalazar solution from Twitter Bootstrap Modal stop Youtube video and it worked perfectly. This was the solution I used.
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
Well you can simply remove the src of the iframe and the put back again like ;
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}
You just need to stop the video on the hidden.bs.modal event:
$('#myModal').on('hidden.bs.modal', function () {
player.stopVideo();
// or jQuery
$('#playerID').get(0).stopVideo();
// or remove video url
$('playerID').attr('src', '');
})
Here is a very similar (if not equal) to what you need to do: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
They do not use the iframe API so everytime they close the modal they just delete the video url .attr('src', '');
For multiple modals with iframe videos, here is the solution:
$('#myModal').on('hidden.bs.modal', function(e) {
var $iframes = $(e.target).find('iframe');
$iframes.each(function(index, iframe){
$(iframe).attr('src', $(iframe).attr('src'));
});
})
On modal close, it goes through all the iframe videos and resets them instead of resetting all of them to the first video.
// Simple and clean
Try using class or ID before Iframe to refresh/reload the particular video. Otherwise, it will reload all iframe source.
$( id/class + 'iframe').attr('src', $('iframe').attr('src'));
**If you want to open modal with iframe and remove on close best and short answer**
test = function (){
$('#test_tutorial').modal('show').on('hidden.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", "");
}).on('show.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", $("#test
_tutorial iframe").attr("data-src"));
});
}
Late to the party, but some people may find this useful in the future. In my case I had a real struggle achieving this due to the video being embedded from a div with a video element in the iframe, not with the src directly in the iframe element, like this:
<iframe>
<div class="videoContainer">
<video src="#"></video>
</div>
</iframe>
I solved this with the following approach:
$('#myModal').on('hidden.bs.modal', function() {
$('iframe').contents().find('video')[0].pause();
});
It also pauses the video instead of refreshing the url/replacing the src attribute by the same value, as suggested in the accepted answer.
I'm using the following JS code to play an HTML5 custom video and - at the same time - activating an iframe, that will be launched just 27 seconds after the play video button is clicked.
But, I'm experiencing 2 issues:
The play button is requiring 2 clicks to start the video, instead of
just 1
The iframe is randomly activated even when the play video button
isn't clicked (between 25 and 40 seconds after the page is loaded,
randomly)
Any idea why?
<script type="text/javascript">window.onclick=function() {
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click",function(){if(video.paused==true){video.play();
playButton.innerHTML=" ";}else{video.pause();
playButton.innerHTML=" ";}});
}</script>
Here's the html part:
<video class="video-js" id="167868028" preload="false" width="910" height="510" poster="img/snapshot.jpg" data-setup="{}">
<source src="video/vid.mp4" type="video/mp4"></video>
<div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
<iframe id="dwayne" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="files/iframe.php"></iframe>
<div id="blackrussian"></div>
You've got the playButton.addEventListener nested inside the window.onclick, could be that's what's causing the two-click requirement.
And the setTimeout is inside window.click but not inside playButton.addEventListener("click"..., meaning clicking the button will not fire it, but clicking the window will, (after 27 seconds).
window.onload=function() {
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click", function()
{
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
if(video.paused==true){
video.play();
playButton.innerHTML=" ";
}else{
video.pause();
playButton.innerHTML=" ";
}
});
}
Haven't tested the code but it should work...
Based on your query, here the simplest way to make it works.
When clicking one time anywhere on the page, the video will start. Then 27 seconds later, the iframe receive a new src url, and then load.
window.onclick=function() {
document.getElementById("167868028").play()
setTimeout(loadFrame, 27000)
}
function loadFrame(){
document.getElementById("dwayne").src = "http://arunranga.com/examples/access-control/"
}
<video id="167868028" width="91" height="51" poster="img/snapshot.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<iframe id="dwayne" frameborder="3" src="" scrolling="yes"></iframe>
I have seen a few posts about this , but the answers I find are about 1 video and not multiple videos on same page.
I have around 10 videos on my web page. When we click the button for each I want the overlay to pop up which it does. Then a video to be played.
Once the user clicks the exit button I want the video to stop playing.
At the minute if a user does no click pause of the youtube video and exits out it keeps playing in the background.
i will show just 2 video sections for this example:
<div class="play-button">
<i class="fa fa-play"></i>
</div>
<div class="youtube-frame">
<div class="exit-youtube-frame">
<i class="fa fa-times"></i>
</div>
<iframe width="520" height="345" src="<?= $video ?>"></iframe>
</div>
<div class="play-button">
<i class="fa fa-play"></i>
</div>
<div class="youtube-frame">
<div class="exit-youtube-frame">
<i class="fa fa-times"></i>
</div>
<iframe width="520" height="345" src="<?= $video ?>"></iframe>
</div>
Now in Jquery i do this:
jQuery('.play-button').click(function(){
jQuery('#overlay-youtube').show(); // This is the overlay
jQuery(this).next().show();
});
jQuery('.exit-youtube-frame').click(function(){
jQuery(this).parents('.youtube-frame').hide();
jQuery('#overlay-youtube').hide();
});
How do i incorporate method which will stop the video playing for each section?
I had the same problem with showing product videos on a site and stopping them from playing after closing the overlay.
As long as you don't need to pause the video so the user can pick up where they left off, you can simply use the detach() method to store the video object in jQuery then re-add it to the DOM when the user clicks to show it.
Here is my code for just one video (HTML then jQuery):
<div id="product-video-overlay">
<div id="video-container">
<a class="close-overlay">Close</a>
<iframe id="ytplayeroverlay" type="text/html" src="{youtubeURL}"></iframe>
</div>
</div>
var videoOverlay = $('#product-video-overlay');
var videoObject = videoOverlay.find('#video-container');
var hasVideo = 1;
$('li.video-thumb').click(function () {
if (hasVideo == 0) {
videoObject.appendTo(videoOverlay);
}
videoOverlay.fadeIn();
});
$('#product-video-overlay, #product-video-overlay a.close-overlay').click(function (e) {
e.stopPropagation();
videoOverlay.fadeOut();
videoObject.detach();
hasVideo = 0;
});
Since you have multiple videos, you will need some way to identify the play button with its corresponding overlay/video (maybe adding a matching class to each?).
As well, you would probably want to store each detached element into an array to retrieve later by the matching class or whatever method you use to link the button to the proper video.
This is just how I tackled the problem. I know there is a YouTube API available to use, but this did the job.
Good luck!
I'm trying to make custom HTML5 audio event buttons. I know I can use the controls but I want to make my own my code is below:
<audio autoplay="true" loop src="vid/birth.mp3"></audio>
<button onclick="document.getElementsByTagName('audio').play()">Play</button>
<button onclick="document.getElementByTagName('audio').pause()">Pause</button>
When I load the page the audio starts but the controls won't work, I click them and nothing happens. What am I doing incorrectly?
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});