html object怎样控制mp4视频暂停与播放,使用JQuery播放/暂停HTML 5视频

Your solution shows the issue here -- play is not a jQuery function but a function of the DOM element. You therefore need to call it upon the DOM element. You give an example of how to do this with the native DOM functions. The jQuery equivalent -- if you wanted to do this to fit in with an existing jQuery selection -- would be $('#videoId').get(0).play(). (get gets the native DOM element from the jQuery selection.)

This is how I managed to make it work:

jQuery( document ).ready(function($) {

$('.myHTMLvideo').click(function() {

this.paused ? this.play() : this.pause();

});

});

All my HTML5 tags have the class 'myHTMLvideo'

You can do

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

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

Why do you need to use jQuery? Your proposed solution works, and it's probably faster than constructing a jQuery object.

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

For pausing multiple videos I have found that this works nicely:

$("video").each(function(){

$(this).get(0).pause();

});

This can be put into a click function which is quite handy.

As an extension of lonesomeday's answer, you can also use

$('#playMovie1').click(function(){

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

});

Notice that there is no get() or eq() jQuery function called. DOM's array used to call play() function. It's a shortcut to keep in mind.

I like this one:

$('video').click(function(){

this[this.paused ? 'play' : 'pause']();

});

Hope it helps.

I use FancyBox and jQuery to embedd a video. Give it an ID.

Perhaps not the BEST solution could toggle play/pause differently - but easy for me and IT WORKS! :)

In the

`

// 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();

}

}

});

`

This is the easy methods we can use

on jquery button click function

$("#button").click(function(event){

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

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

}

Thanks

Just as a note, make sure you check if the browser supports the video function, before you try to invoke it:

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

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

That will prevent JavaScript errors on browsers that don't support the video tag.

By JQuery using selectors

$("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');

By Javascript using ID

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

OR

document.getElementById('video_ID').play(); document.getElementById('video_ID').pause();

use this..

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

I also made it work like this:

$(window).scroll(function() {

if($(window).scrollTop() > 0)

document.querySelector('#video').pause();

else

document.querySelector('#video').play();

});

@loneSomeday explained it beautifully , here one solution which might also give you good idea how to achieve play/pause functionality

$(document).ready(function(){

document.getElementById('vid').play(); });

enter code here

Choose files

Play Video

Pause Video

(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();

}