我试图用JQuery控制HTML5视频。我在一个选项卡界面中有两个剪辑,总共有六个选项卡,其他的只有图像。我试图使视频剪辑播放时,他们的标签被点击,然后停止时,任何其他被点击。

这一定是一个简单的事情要做,但我似乎不能让它工作,我使用的代码播放视频是:

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

我读过,视频元素需要在一个函数中公开,以便能够控制它,但找不到一个例子。我能够使它工作使用JS:

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

任何建议都很好。谢谢


当前回答

使用这个. . $ (' # video1 ') .attr({“播放”:“真实”});

其他回答

    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>

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

jquery上的按钮点击功能

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

谢谢

@loneSomeday解释得很好,这里有一个解决方案,可能也会给你一个很好的主意,如何实现播放/暂停功能

点击播放/暂停视频

我使用了fantybox和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>`

使用这个. . $ (' # video1 ') .attr({“播放”:“真实”});