I have seen a few solutions to a similar issue here on SO but none do what I need. I have a web page that will be displayed on a kiosk that will not have internet connection so everything is local. All of my videos are in bootstrap modals and they continue to play on modal close.
One solution removes the link entirely and so the video can't be replayed if clicked again. The other solutions in their various forms stop the video for 1/2 a second then the video continues.
Video Modal
<!-- Modal Overview -->
<div class="portfolio-modal modal fade" id="gal_overview" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">Overview</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="video/overview.mp4" allowfullscreen></iframe></div>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times"></i>
Close Video</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Last Script Tried
<script>
$('.portfolio-modal').on('hide.bs.modal', function(e) {
var $if = $(e.delegateTarget).find('iframe');
var src = $if.attr("src");
$if.attr("src", '/empty.html');
$if.attr("src", src);
});
</script>
This current code will start playing all videos in the background on page load. I'm sure I'm missing something super simple here.
Working answer:
Since the iframe just points to a video file, you can change the iframe to a <video> and control the video much more easily.
<video src="video/overview.mp4"></video>
The .pause() method on the video element can then be used to actually pause the video.
<script>
$('.portfolio-modal').on('hide.bs.modal', function(e) {
var $v = $(e.delegateTarget).find('video');
$v[0].pause(); // use [0] because jQuery returns a list
});
</script>
Initial answer:
It sounds like you should lazily-apply the iframe's src attribute. So when the page loads, the iframes' src attributes should be data-src. That way no video is playing.
Then on $('.portfolio-modal').on('show.bs.modal'), set the src attribute with the contents of data-src. The video will play.
Then when the modal is hidden, replace src with /empty.html again.
Next time the modal is launched, the src will be set again, and the cycle repeats.
If you truly want to pause the video rather than reset the iframe, then this answer should be helpful.
Related
I am storing the YouTube and video embed urls in my database. Then calling the video URL in the modal to play the video. But video keeps playing even if the modal is closed. I have tried this solutions and it works for me, but it assign the same id to every video.
I mean, i have 6 different videos in my page and this solution then, play the same video in every modal.
Please guide.
Thanks in advance
Here is my code
if($row['link_type'] == 'yt_video'){
?>
<div class="modal" id="mod<?=$i ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<h5 class="modal-title" id="exampleModalLabel">Add Video Url For <b><?php echo $row['title']; ?></b></h5> -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</div>
<div class="modal-body">
<!-- video section strts -->
<div class="service-video-section josh-js" data-josh-anim-name="" data-josh-duration="1500ms" data-josh-anim-delay="3.5s">
<div class="video-section-content">
<div class="video">
<?=$row['link_desc'] ?>
</div>
</div>
</div>
<!-- video section Ends -->
</div>
</div>
</div>
</div>
<?php
}
$i++;
}
?>
And here is my solution that i tried
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
Have you considered using the youtube and vimeo APIs? You will then be able to control the embeded players controls i.e. stop, play, pause etc. Like mentioned below:
Stop embedded youtube iframe?
Then when you fire the close.click function you can also stop the video.
Im trying something which is kinda easy but im having some problems with it and i would like to get done it today.
I have a website page which has the following:
<button type="button" class="btn btn-primary btn1" data-toggle="modal" href="https://teespring.com/es/camiseta-gymsroka-deportiva?tsmac=store&tsmic=sroka-merchandising-2#pid=373&cid=100035&sid=front" data-target="#myModal" >Pedir ahora</button>
I have an eventListener with jQuery like this:
$('.btn1').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
so when the button is clicked it loads a modal and inside that modal it loads the wanted site on the href attribute, my modal coda btw is this:
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
Pretty easy modal. Well the problem it comes when i click the button, on chrome it works, it opens the modal and it loads the url correctly, but it says few errors on the console.log like this:
Invalid 'X-Frame-Options' header encountered when loading 'https://teespring.com/es/camisa-de-tirantes-gymsroka?tsmac=store&tsmic=sroka-merchandising-2#pid=408&cid=100232&sid=front': 'ALLOW-FROM https://www.facebook.com' is not a recognized directive. The header will be ignored.
in firefox it tells me the error but it doesn't load anything...
How i can fix this? If there is a possible fix or how you guys would have made this? My objective is to have few items on my website and "sell" them to the users, but the sell process is made by another company so its easier and cheaper for me. How i can do it? Thank you team!
That error occurs because the website you are trying to load inside the Iframe is denying access to load using http headers.
The website should allow that by configuring the X-Frame-Options header
You can read more here.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
I am building a web application using asp.net, Bootstrap and JQuery and currently debugging an issue on LocalHost.
I have a navbar with a dropdown menu containing links to tutorial videos.
When a user selects a video, a modal popup appears containing the tutorial video.
This works perfectly in all browsers, but in Internet Explorer when I select a video, close the modal and then select another video, I receive the following error message:
"Error Unsupported Video type or invalid file path"
All videos play if they are the first one I select, but if i go to select another i get the above error.
When I inspect the video in developer tools I can see the video source and type are both correct, but when I look at the console it says AUDIO/VIDEO: Unknown MIME type.
This only happens in IE and not Chrome/FireFox.
Can anybody point me in the right direction
Thanks
Drop Down Menu
<ul class="dropdown-menu">
<li class="dropdown-header">Tutorials</li>
<li><a onclick="ShowTutorial('Tutorial1','/videos/Tutorial1.mp4');">Tutorial1</a></li>
<li><a onclick="ShowTutorial('Tutorial2','/videos/Tutorial2.mp4');">Tutorial2</a></li>
</ul>
Jquery Functions
function ShowTutorial(heading, filepath) {
$('#modalTutorial').modal({ backdrop: 'static', keyboard: false, show: true });
$('#<%=lblTutorialAlertHeader.ClientID%>').text(heading);
var player = document.getElementById('tutorialVideo');
player.pause();
$('#TutorialSource').attr('src', filepath);
player.load();
player.play();
}
function HideTutorial() {
HideModals();
var player = document.getElementById('tutorialVideo');
player.pause();
$('#TutorialSource').attr('src', '');
player.load();
}
function HideModals() {
$('div.modal').modal('hide');
}
Modal Code
<div id="modalTutorial" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1 class="modal-title">
<asp:Label ID="lblTutorialAlertHeader" runat="server" Text="Heading"></asp:Label>
</h1>
</div>
<div class="modal-body">
<div id="modalTutorialBody">
<video id="tutorialVideo" width="100%" controls>
<source id="TutorialSource" src="" type="video/mp4" />
</video>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="" onclick="HideTutorial();">Close</button>
</div>
</div>
</div>
</div>
From your description it is possible this is just an issues with relative vs absolute paths and the base URL for the site.
Historically, Chrome and Firefox have supported relative paths in the site bass tag but IE does not.
See here for some background on links and paths: https://www.w3.org/TR/html401/struct/links.html
I am trying to use modal to popup and play a local mp4 video.
It works on Chrome, Firefox, IE Edge except the IE11 or older version. It always popup a warning on the bottom "Do you want to open or save xxxx from xxxxx". If I click open, it will open the Films & TV to play the video.
Is there anything I missed from using the bootstrap modal? Or it just what IE works like?
Here is my modal:
<div class="productVideo">
<a href="#videoModal" data-toggle="modal">
<img src="../assets/img/product/icon/play-button.png">
</a>
<!-- Modal HTML -->
<div id="videoModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="video" src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
Besides, I found the mp3/mp4 from the MDN could not be played normally in IE, it will warn "Do you want to open or save xxxx from xxxxx", but Chrome could play it normally.
Update
use 'video' tag instead of 'iframe' works for IE11 now.
I'm pretty new to JavaScript so I'm not sure how to do the following.
Basically the following line is what I'm going for:
<a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a>
The 0000000 you see needs to be the special code at the end of a youtube videos link, so it needs to be different each time i use it, for example:
<a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a>
<a onclick="JavascriptFunction(0000001)"><img src="image2.png"></a>
<a onclick="JavascriptFunction(0000002)"><img src="image3.png"></a>
What I would like the JavaScript function to do is make a pop window, with the same width and height of a YouTube video, and edit the HTML in that window to have the corresponding video.
<iframe width="560" height="315" src="https://www.youtube.com/embed/0000000"></iframe>
What I'm after really is a page with all our video reviews we do for our company, we click the thumbnail for the product and the popWin() comes up with the video they were looking for. I understand I can make a few pages with the right videos and use the onclick="popWin()" to open the right ones, but we have a lot of videos to put on this page, so is there a way to have one page and change the code in the iframe to be the correct video?
Just a heads up since this is for a company, I only have access to the HTML page and nothing else, so long as I can put a function in the head section that is fine.
See this JSFiddle
HTML
Video 1<br/>
Video 2<br/>
Video 3<br/>
<iframe id="youtube" width="560" height="315" src="https://www.youtube.com/embed/0000000"></iframe>
JavaScript
function setVideo(video) {
document.getElementById("youtube").src = "https://www.youtube.com/embed/" + video;
}
So.. Give your iframe an id, and change the src attribute of that.
include these references. you can get the popup from bootstarap modal popup
jquery reference
bootstrap js reference
bootstrap css reference
ref: http://getbootstrap.com/javascript/#modals
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function(){
$("#iframeYoutube").attr("src","#");
})
})
function changeVideo(vId){
var iframe=document.getElementById("iframeYoutube");
iframe.src="https://www.youtube.com/embed/"+vId;
$("#myModal").modal("show");
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a onclick="changeVideo('e80BbX05D7Y')">video-1</a>
<a onclick="changeVideo('ReRcHdeUG9Y')">video-2</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe id="iframeYoutube" width="560" height="315" src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i have return this solution in codepen checkout:http://codepen.io/rajashekar2012/pen/dMrodq