jquery控制下的video视频播放

最新推荐文章于 2024-09-20 22:08:41 发布

原创最新推荐文章于 2024-09-20 22:08:41 发布 · 7.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #video

本文介绍了如何使用jQuery实现视频播放的控制，包括设置封面并点击播放按钮启动视频播放。通过示例代码展示了如何结合HTML和JavaScript实现这一功能。

最新实现的video视频播放问题

在原来的工作中，使用过最基本的视频插入播放的效果，如下图所示：
在这里插入图片描述

这里通过使用controls属性来显示视频的播放按钮，以及进度条的展示，接下来，我将展示使用jquery控制单独的按钮，点击进行播放。效果图如下：
在这里插入代码片
这里我做了一个封面（使用了poster=“img/xx.jpg”）,当点击播放按钮式，对视频进行播放。
代码如下：
html:

<div class="all">
        <video width="320" height="240" src="two.mp4" loop poster="img/timg.jpg"></video>
        <div class="video-start" style="display:none">
            <img src="img/start.png">
        </div>
        <div class="video-stop" style="display:none">
            <img src="img/end.png">
        </div>
    </div>

javascript:

 <script>
       $(document).ready(function(){
          $(".all").mouseover(function(){
            $(".video-start").show()
          })
          $(".all").mouseleave(function(){
            $(".video-start").hide()
          })
          $(".video-start").click(function(){
            $(".all video")[0].play()
          })
       })
    </script>

有兴趣的小可爱可以参考哦，欢迎指出不足的地方，共同进步~~~