Question

我正在尝试使用JQuery控制HTML5视频。我在选项卡式界面中有两个剪辑，总共有六个选项卡，其他只有图像。我正在尝试在单击其选项卡时播放视频剪辑，然后在单击任何其他选项时停止播放。

这一定是一件简单的事情，但我似乎无法让它工作，我用来播放视频的代码是：

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

我已经读过视频元素需要在函数中公开才能控制它，但找不到示例。我能够使用JS：

使其工作

document.getElementById('movie1').play();

任何建议都会很棒。感谢

Answer 1

您的解决方案在此处显示问题 - play不是jQuery函数，而是DOM元素的函数。因此，您需要在DOM元素上调用它。您举例说明如何使用本机DOM函数执行此操作。 jQuery等价 - 如果你想这样做以适应现有的jQuery选择 - 将是$('#videoId').get(0).play()。（get从jQuery选择中获取本机DOM元素。）

Answer 2

这就是我设法让它发挥作用的方式：

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

我的所有HTML5代码都有“myHTMLvideo”类

Answer 3

你可以做到

$('video').trigger('play');
$('video').trigger('pause');

Answer 4

为什么需要使用jQuery？您提出的解决方案可行，并且它可能比构建jQuery对象更快。

document.getElementById('videoId').play();

Answer 5

对于暂停多个视频，我发现这很有效：

$("video").each(function(){
    $(this).get(0).pause();
});

这可以放入点击功能，非常方便。

Answer 6

作为lonesomeday答案的延伸，您也可以使用

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

请注意，没有调用get（）或eq（）jQuery函数。 DOM的数组用于调用play（）函数。这是记住的捷径。

Answer 7

我喜欢这个：

>> whos
  Name         Size                 Bytes  Class      Attributes

  A         1000x1000             8000000  double               
  Abin        1x31250              125000  uint32               
  Arec      1000x1000             8000000  double               
  B         1000x1000             1000000  logical

希望它有所帮助。

Answer 8

我使用FancyBox和jQuery嵌入视频。给它一个ID。

也许不是最好的解决方案可以不同地切换播放/暂停 - 但对我来说很简单并且工作正常！：）

在

中

`

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById('current_video_playing').value

    if (e.which == 32) {

        if (document.getElementById('current_video_status').value == 'playing') {

            document.getElementById(theVideo).pause();

            document.getElementById('current_video_status').value = 'paused'

        } else {

            document.getElementById('current_video_status').value = 'playing'

            document.getElementById(theVideo).play();

        }

    }

});

</script>`

Answer 9

这是我们可以使用的简单方法

在jquery按钮上单击功能

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

由于

Answer 10

请注意，在尝试调用之前，请确保检查浏览器是否支持视频功能：

if($('#movie1')[0].play)
    $('#movie1')[0].play();

这样可以防止不支持视频标记的浏览器出现JavaScript错误。

Answer 11

通过JQuery使用选择器

SELECT     COALESCE(a.timestamp, b.timestamp) AS timestamp,
           COALESCE(a.number, b.number) AS number
FROM       tablea a WITH (nolock) 
RIGHT JOIN tableb b WITH (nolock) 
ON         a.timestamp = b.timestamp

使用Javascript使用ID

$("video_selector").trigger('play');  
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');

OR

video_ID.play();  video_ID.pause();

Answer 12

我也让它像这样工作：

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});

Answer 13

你可以做到

$(document).on("click","button.play", function() {
  $('video').trigger('play');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="myvideo" controls="">
                 <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" "="">
                 <source src="" type="video/ogg">
                 <source src="" type="video/webm">
</video>

<button clsss="play">Play</button>

Answer 14

    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>

Answer 15

<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById('vid').play(); });
</script>

Answer 16

@loneSomeday解释得很漂亮，这里有一个解决方案可能会让你知道如何实现播放/暂停功能

play/pause of video on click

Answer 17

用这个.. $('#video1').attr({'autoplay':'true'});

Answer 18

在这里找到答案@ToolmakerSteve，但必须通过以下方式进行微调：暂停所有

$('video').each(function(index){
    $(this).get(0).pause();
});

或全部播放

$('video').each(function(index){
    $(this).get(0).play();
});

Answer 19

您可以使用基本的HTML播放器，也可以制作自己的自定义播放器。只是说。如果需要，可以参考... https://codepen.io/search/pens?q=video+player并进行滚动浏览。是给你的。

使用JQuery播放/暂停HTML 5视频

19 个答案: