播放暂停 html5 视频 javascript

Posted 2023-05-07

【中文标题】播放暂停 html5 视频 javascript

【英文标题】：play pause html5 video javascript

【发布时间】：2012-05-06 20:38:54

【问题描述】：

我有一个功能，当我点击播放器中显示的海报图像时播放视频，它似乎工作：

var video = document.getElementById('player');
video.addEventListener('click',function()
    video().play();
,false);

在 html5 视频标签中，我有类似的内容： id="player" onclick="this.play();"

问题是，如果我在视频控件上按下暂停，它实际上会暂停，这很好，但是如果我按下视频控件上现在的播放按钮，我可以看到按钮更改为再次暂停一秒钟然后它再次回到播放按钮。所以我按下播放键，它只播放几帧，然后回到暂停状态。让它再次播放的唯一方法是点击视频观看区域。

使用控制栏播放/暂停按钮时如何使其停止返回暂停，以及单击视频查看区域时如何使其暂停？

我尝试了以下方法，但它不起作用：

var video = document.getElementById('player');
video.addEventListener('click',function()
    if(video.paused)
        video().play();
    else
        video.pause();
    
,false);

我想要在实际观看区域上播放视频的原因是在android上很难找到微小的控制栏播放按钮，因为它太小了，人们只需按下观看就更容易了地区让它去。在 Firefox 中，当我点击查看区域和暂停时，视频播放器会播放，这正是我想要发生的事情，它也不需要任何 javascript 就可以做到这一点。在 Android 中，当我按下查看区域时，视频根本不会播放。所以我基本上是在尝试强制 Android 浏览器像 Firefox 原生那样运行。

【问题讨论】：

请通过此链接***.com/questions/4646998/…

我经历过，没有什么可以帮助解决这个问题

【参考方案1】：

$('#play-pause-button').click(function () 
   var mediaVideo = $("#media-video").get(0);
   if (mediaVideo.paused) 
       mediaVideo.play();
    else 
       mediaVideo.pause();
  
);

我在 jQuery 中完成了这项工作，既简单又快速。要尝试它，您只需要使用视频标签的 ID 和播放/暂停按钮即可。

编辑： 在原生 JavaScript 中： 视频不是函数，而是 DOM 的一部分，因此使用

 video.play(); 

代替

video().play() **wrong**

【讨论】：

@SaurabhLP Apple 已于 2012 年停止使用 Windows 版本的 Safari，所以我认为我们不必再为此担心了。

【参考方案2】：

在我看来，视频不是一个函数，那你为什么有括号？那是你的错误。

所以不要使用video()，而是使用video

【参考方案3】：

在 Chrome v22、Firefox v15 和 IE10 中对我来说这种工作（使用 jquery）：

$('video').on('click', function (e) 
    if (this.get(0).paused) 
        this.get(0).play();
    
    else 
        this.get(0).pause();
    
    e.preventDefault();
);

preventDefault 在这里停止了您看到的跳帧问题，但随后它破坏了控制部分上的其他按钮，例如全屏等。

看起来没有什么容易的，为什么要这样做？我原以为供应商会默认点击播放，这似乎是合乎逻辑的事情。 :|

【参考方案4】：

这是最简单的解决方案

this.on("pause", function () 
    $('.vjs-big-play-button').removeClass(
        'vjs-hidden'
    ).css('display', 'block');
    this.one("play", function () 
        $('.vjs-big-play-button').addClass(
            'vjs-hidden'
        ).css('display', '');
    );
);

【讨论】：

最简单的解决方案？这假设您使用的是第三方库 video.js。你的答案的一些背景会很好。

【参考方案5】：

$('#video-id').click(function() 
    // jQuery sets this as the DOM element that triggered the event
    // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0)
    if (this.paused) 
        this.play();
     else 
        this.pause();
    
);

【讨论】：

在 Firefox 中损坏；见***.com/questions/28353352/…

【参考方案6】：

我相信，这是编写您想要实现的目标的最简单、最简单的方法：

var myVideo = document.getElementById('exampleVideo');

            $(myVideo).click(function toggleVideoState() 
                if (myVideo.paused) 
                  myVideo.play();
                  console.log('Video Playing');
                 else 
                  myVideo.pause();
                  console.log('Video Paused');
                
              );

当然，登录控制台只是为了说明。

【参考方案7】：

            function myFunction() 
            var playVideo = document.getElementById('myVideo');
            var button = document.getElementById('myBtn');

            if (playVideo.paused) 
               playVideo.play();
                button.innerHTML= "pause";
             else 
               button.innerHTML= "play";
               playVideo.pause();
            
            ;

【参考方案8】：

document.getElementById("play").onclick = function()
    if (document.getElementById("videoPlay").paused)
        document.getElementById("videoPlay").play();
     else 
        document.getElementById("videoPlay").pause(); 
    

【讨论】：

写一些解释和一些代码总是一个好习惯。谢谢！

添加上下文。 （来自评论）。