如何使用 jQuery 打开视频并在 .click 上播放？答案

【问题标题】：How can I make a video open and play on a .click with jQuery?如何使用 jQuery 打开视频并在 .click 上播放？
【发布时间】：2016-12-18 04:18:18
【问题描述】：

我正在尝试使用带有 .click 功能的 jQuery 打开和播放视频。我在不同的网站上看到过这种情况，网站的某个部分有一个播放按钮，当点击它时，网站的其余部分会变暗，视频播放器打开，视频播放。我想在我的网站上实现它，但我不确定如何进行。任何帮助将不胜感激。谢谢！

<a class="playBtn" href="#"><i class="fa fa-play-circel fa-3x" aira-hidden="true"></i></a> <!--Is the button I want to use to activate the video.-->
<script>
    $(document).ready(function() {
            $(".playBtn").click(function(){

            });
        });
    </script>

【问题讨论】：

你的代码在哪里？
我添加了一些我所拥有的，但我不知道如何从那里开始，不适合 jquery
同时粘贴视频标签<video...

标签： javascript jquery video onclick fullscreen

【解决方案1】：

这是您需要的简化演示：

$( document ).ready(function($) {
    $('#playButton').click(function() {
        $('#myVideo')[0].paused ? $('#myVideo')[0].play() : $('#myVideo')[0].pause();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVideo" width="320" height="240" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4"  type="video/mp4">
Your browser does not support the video tag.
</video> 
<br>
<button id="playButton">Play / Pause</button>

【讨论】：