I am working with bootstrap modal here this code is working fine when I use URL. But when I'm trying to play the video from my local directory. Example when i use <iframe width="1280" height="720" id="sampleVideo" src="assets/sample.mp4" frameborder="0" allowfullscreen></iframe> its not working fine.The issue is whenever page refresh video automatically plays before click on play video button. I tried using HTML5 video tag also but the problem is with the bootstrap model that is not working. And also ?rel=0. I don't want to use any plugins.
$(document).ready(function() { $(".modal").modal('hide'); var url = $("#sampleVideo").attr('src'); $(".modal").on('hide.bs.modal', function() { $("#sampleVideo").attr('src', ''); }); $(".modal").on('show.bs.modal', function() { $("#sampleVideo").attr('src', url); }); });.teaser { background-size: cover; position: relative; } .teaser .modal-dialog { max-width: 100%; } .teaser .modal { padding-right: 0!important; } .teaser iframe { height: 100vh; width: 100%; } .teaser .modal-body { padding: 0; margin: 0; } .teaser .close { color: white; position: absolute; /* background: blue !important; */ border: 0; top: 0; z-index: 99999; right: 3%; float: none; opacity: 1; font-size: 40px; font-weight: 400; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="teaser container-fluid"> <a href="#videoStory" class="videoBtnbutton more mt-4 d-block" role="button" data-toggle="modal" data-target="#modal-fullscreen">Play Video</a> <div class="modal modal-fullscreen fade" id="modal-fullscreen" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body" id="yt-player"> <iframe width="1280" height="720" id="sampleVideo" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </div> </div> </div>the working code here codepen link here
1 Answers
Answers 1
Because that if you use iframe to insert a local video, browser like Chrome will create elements like:
<video controls autoplay name="media"> <source src="assets/sample.mp4" type="video/mp4"> </video> It will add attribute autoplay.
So one way you can handle it is that removing autoplay attribute from the element on document ready:
$(document).ready(function(){ $("#sampleVideo").contents().find('video').prop("autoplay", false); }); But you will probably meet an issue that video plays before document ready. A way to mitigate it is to reset video progress:
$(document).ready(function(){ var elem = $("#sampleVideo").contents().find('video')[0]; elem.autoplay = false; elem.pause(); elem.currentTime = 0; }); For re-opening the modal, you can also add event handler for iframe onload:
$('#sampleVideo').on('load', function() { var elem = $("#sampleVideo").contents().find('video')[0]; elem.autoplay = false; elem.pause(); elem.currentTime = 0; }); But I think the real way to deal with it is to use real video tag for local resources:
<div class="modal-body" id="yt-player"> <video controls name="media"> <source src="assets/sample.mp4" type="video/mp4"> </video> </div> $(document).ready(function(){ $(".modal").modal('hide'); var url = $("#sampleVideo").attr('src'); $(".modal").on('hide.bs.modal', function(){ var elem = $("#sampleVideo")[0]; elem.pause(); elem.currentTime = 0; }); $(".modal").on('show.bs.modal', function(){ var elem = $("#sampleVideo")[0]; elem.pause(); elem.currentTime = 0; }); }); Because url in src of the iframe should return an HTML.
0 comments:
Post a Comment