jquery怎么实现点击video播放，或暂停？ 页面上有好几个video，怎么实现，点击播放或者

Posted 2023-04-13

jquery怎么实现点击video播放，或暂停？
页面上有好几个video，怎么实现，点击播放或者暂停？

如果要实现点击video播放或暂停，可以使用jquery的选择器来方便选取DOM。

但要注意：jquery中并没有直接控制<video>元素播放、暂停的方法，需要用原生的javascript代码来控制。

如果是使用的html5的video 标签，可以取到播放器即可实现。

var Media = document.getElementById("media");

Media.play(); //播放

Media.pause(); //暂停

参考技术A

HTML5中已经为 <video> 元素提供了相关方法、属性和事件，直接使用 JavaScript 来操作即可，当然你也可以使用jQuery的选择器来方便选取DOM，但这里要注意的一点是，jQuery中并没有直接控制<video> 元素播放、暂停的方法，你需要用原生的JavaScript代码来控制。

举例（例如页面上有1个video）：

<video id="myVideo" src="1.webm" controls />

则对应的脚本代码为：

/* JS代码 */
document.getElementById('myVideo').play(); // 播放
document.getElementById('myVideo').pause(); // 暂停

/* jQuery代码 */
$('#myVideo').play(); // 播放
$('#myVideo').pause(); // 暂停

追问

你好，我的要面上有好几个视频，怎么实现点击视频播放或者暂停啊？

追答

为每个video标签加上controls这句，则视频播放控件上会出现暂停与播放按钮，点击即可控制播放暂停。

参考技术B <video src="" controls="controls">
</video>
加上 controls 就可以显示控件，比如播放按钮。
加上 autoplay 则直接播放，loop 则是连续播放 参考技术C $(function()

$("video").on("click",function()
if($(this)[0].paused)
$(this)[0].play();
else
$(this)[0].pause();

)

);
<video src="img/1.mp4"></video>
<video src="img/2.mp4"></video>
<video src="img/3.mp4"></video>

多个video点击哪个就播放哪个 参考技术D 其一可以每个绑定事件。其二可以用对象数组吧。
---找前辈网

实现视频的暂停播放，上下切换等功能

这里只说明一些逻辑思维：详细代码可以看我的——unity视频播放器

1、暂停与播放之间的切换

        要实现点击播放，再点击暂停的功能

        则要知道你修改的参数是哪一个（比如Video中的是Pause（）函数和Play()函数）PS：AudioSoure中的是Pause（）和UnPause（）——判断依据：Video.isPlaying（是一个bool类型）

        两个图片之间的切换

          变为 

         首先这是两个功能按钮，一个一开始会隐藏，当点击图一中的按钮时，图二按钮会显示出来，再点击图二按钮时图二隐藏则出现的是图一的按钮。（图二的按钮层级是要在图一按钮下面的，即显示在画面的上一层）PS：图二与图一按钮是父子层级结构的。

        

 

综上所述则可以实现点击切换不同的按钮和视频的暂停与播放功能。

2、视频上下切换的功能

       上下按钮实现切换不同的视频

        点击按钮切换不同视频——要有一个播放视频的列表（可以用到数组）——问题：不能够自动循环的跳转或暂停所切换的视频——查询到对应的视频ID才能够进行播放（可以定义一个视频ID）——写两个函数分别判断视频的Id是否到了最后一个或是第一个——切换到最后一个，将ID切换到第一个，另一种情况反之。

以下代码是实现上下切换的主要代码：

    //<summary>
    //上一首
    //</summary>
    public void Prve()
    
        _playId--;
        if (_playId < 0)
        
            //_playId = 0;    //到头了就不能切换了
            _playId = VideoList.Length - 1;  //切换到最后一首
            Debug.Log("到头了");
        
        Play();
    
    //<summary>
    //下一首
    //</summary>
    public void Next()
    
        _playId++;
        if (_playId > VideoList.Length - 1)
        
            //_playId = ClipList.Length - 1;    //到尾了就不能切换了
            _playId = 0; //切换到第一首
            Debug.Log("到尾了");

        
        Play();
    

辅助代码——按钮控制：

public Button Pausebtn;

void Start()

            Pausebtn.onClick.AddListener(PauseFun);



private void PrevFun()
    
        MyVideoPlayer.Instance.Next();
        TxtInfo.text = MyVideoPlayer.Instance.GetMusicName();    //前一个代码是要写成单例模式，这里是调用其方法。
    

今天就记录到这里啦！

期待自己的学习更近一步！加油加油！！！