如何更换视频时停止播放视频(Jquery)?

时间:2016-06-25 15:28:38

标签: jquery video methods replacewith

Jquery的:

$(function () {

$('.videos').hide();
$(".bat").click(function () {
    $('.videos').hide();
    $('.morcego').slideDown();
    $('.default').replaceWith(".morcego");
});
$('.hit').click(function () {
    $('.videos').hide();
    $('.careca').slideDown();
    $('.default').replaceWith(".careca");
});
$('.metro').click(function () {
    $('.videos').hide();
    $('.metro-last').slideDown();
    $('.default').replaceWith(".metro-last");
    });
});

HTML:`                           观看并收听我们的评论             

        <iframe width="900" height="400" src="https://www.youtube.com/embed/tl39XPeb7UE?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="videos morcego img-responsive"></iframe>

        <iframe width="900" height="400" src="https://www.youtube.com/embed/g7uYfhWNvrA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="videos careca img-responsive"></iframe>

        <iframe width="900" height="400" src="https://www.youtube.com/embed/FDIjP6X9f98?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="videos metro-last img-responsive">></iframe>

    </div>

    <div class="videos-list-video">
        <h3 class="align-center">Popular Videos</h3>
        <div class=img-list>

            <img src="img/batman_videos.jpg" class="img-responsive bat">
        </div>
        <div class=img-list>

            <img src="img/hitman_videos.jpg" class="img-responsive hit">
        </div>
        <div class=img-list>

            <img src="img/metro_videos.png" class="img-responsive metro">
        </div>


    </div>

</div>

程序运行正常但是当视频被替换时,另一个不会停止播放而你会听到它。我想我不能使用replaceWith()方法......任何建议?感谢

2 个答案:

答案 0 :(得分:1)

在隐藏0 info it worked if it ends with ok 1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'tsc' ] 2 info using npm@3.10.2 3 info using node@v5.12.0 4 verbose run-script [ 'pretsc', 'tsc', 'posttsc' ] 5 info lifecycle foo@1.0.0~pretsc: foo@1.0.0 6 silly lifecycle foo@1.0.0~pretsc: no script for pretsc, continuing 7 info lifecycle foo@1.0.0~tsc: foo@1.0.0 8 verbose lifecycle foo@1.0.0~tsc: unsafe-perm in lifecycle true 9 verbose lifecycle foo@1.0.0~tsc: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/home/vagrant/foo/node_modules/.bin:/usr/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games 10 verbose lifecycle foo@1.0.0~tsc: CWD: /home/vagrant/foo 11 silly lifecycle foo@1.0.0~tsc: Args: [ '-c', 'tsc' ] 12 silly lifecycle foo@1.0.0~tsc: Returned: code: 2 signal: null 13 info lifecycle foo@1.0.0~tsc: Failed to exec tsc script 14 verbose stack Error: foo@1.0.0 tsc: `tsc` 14 verbose stack Exit status 2 14 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:242:16) 14 verbose stack at emitTwo (events.js:100:13) 14 verbose stack at EventEmitter.emit (events.js:185:7) 14 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:40:14) 14 verbose stack at emitTwo (events.js:100:13) 14 verbose stack at ChildProcess.emit (events.js:185:7) 14 verbose stack at maybeClose (internal/child_process.js:850:16) 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5) 15 verbose pkgid foo@1.0.0 16 verbose cwd /home/vagrant/foo 17 error Linux 3.13.0-88-generic 18 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "tsc" 19 error node v5.12.0 20 error npm v3.10.2 21 error code ELIFECYCLE 22 error foo@1.0.0 tsc: `tsc` 22 error Exit status 2 23 error Failed at the foo@1.0.0 tsc script 'tsc'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the foo package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error tsc 23 error You can get information on how to open an issue for this project with: 23 error npm bugs foo 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls foo 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ] 之前,请移除iframe中的.video

src

答案 1 :(得分:0)

&enablejsapi=1添加到您的iframe src属性

实施例

 <iframe width="900" height="400" 
  src="https://www.youtube.com/embed/tl39XPeb7UE?rel=0&amp;showinfo=0&enablejsapi=1" 
  frameborder="0" allowfullscreen class="videos morcego img-responsive"></iframe>

并致电

jQuery("iframe")[0].contentWindow.postMessage('{"event":"command",
"func":"stopVideo","args":""}', '*');

要停止iframe视频,您可以使用"func":"pauseVideo"暂停视频

查看演示

  

JSFiddle:Demo