jquery - Bootstrap modal and multiple vimeo videos -

-

i have page has multiple videos embedded. each link opens video in bootstraps modal. problem have if close modal video still playing.

i found script force stop next issue page has multiple videos. have tried capture id of each video variable when clicked.

independently 2 scripts have work, bit missing them combined?

html

<ul>     <li><a class="video" href="#" data-toggle="modal" data-target="#video1">video 1</a></li>     <li><a class="video" href="#" data-toggle="modal" data-target="#video2">video 2</a></li>     <li><a class="video" href="#" data-toggle="modal" data-target="#video3">video 3</a></li>     <li><a class="video" href="#" data-toggle="modal" data-target="#video4">video 4</a></li> </ul>

this jquery have stop video playing:

$('#video1').on('hidden.bs.modal', function (e) {     $('#video1 iframe').attr("src", jquery("#video1 iframe").attr("src")); });

and here variable set capture id of clicked link don't have add each id manually script above:

$('a.video').click(function(e) {     editid = $(this).attr("data-target");     alert(editid); });

what struggling find out how add variable , work in first jquery part stops video playing on close.

thanks

you wire handler on first click persist , pass along id. this:

var selector = $(this).attr("data-target"); $(selector).data("hasbeenclicked", true);

but don't need go far. can expand way in you're listening modals close. modal has closed, check see if has iframe inside of it. if so, run script stop playing.

like this:

$('.modal').on('hidden.bs.modal', function (e) {     $iframe = $(this).find("iframe");     $iframe.attr("src", $iframe.attr("src")); });

here's full example in plunker

also, have looked @ javascript api. might able find way pause didn't lose buffering or position of video in case comes it.

full code plunker - won't run on snippets because of sandbox

also, here's shorter javascript handler:

$('.modal').on('hidden.bs.modal', function (e) {     $(this).find("iframe")[0].src += ""; });

sample html:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>  <ul class="nav" >   <li><a href="#" data-toggle="modal" data-target="#video1">video 1</a></li>   <li><a href="#" data-toggle="modal" data-target="#video2">video 2</a></li> </ul>  <div class="modal fade" id="video1">   <div class="modal-dialog">     <div class="modal-content">        <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" >           <span aria-hidden="true">&times;</span>         </button>         <h4 class="modal-title">video 1</h4>       </div>        <div class="modal-body">          <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>        </div>     </div>   </div> </div>  <div class="modal fade" id="video2">   <div class="modal-dialog">     <div class="modal-content">        <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" >           <span aria-hidden="true">&times;</span>         </button>         <h4 class="modal-title">video 2</h4>       </div>        <div class="modal-body">          <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>        </div>     </div>   </div> </div>

Comments

Post a Comment

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; } ...
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(...
Read more

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f...
Read more