如何使用jQuery控制HTML5视频播放/暂停
这篇文章主要介绍了如何使用jQuery控制HTML5视频播放/暂停,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比岷县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式岷县网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖岷县地区。费用合理售后完善,十余年实体公司更值得信赖。
我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止。
我的代码是这样的:
$('#playMovie1').click(function(){ $('#movie1').play(); });
但发现这样不行,而用以下的js是可以的:
document.getElementById('movie1').play();
解决方法:
play并不是jQuery的函数,而是DOM元素的函数,所以我们需要通过DOM来调用play,代码如下:
$('#videoId').get(0).play();
最简单的方法实现Play和Pause:
$('video').trigger('play'); $('video').trigger('pause');
点击视频就能播放和暂停
$("video").trigger("play");//for auto play $("video").addClass('pause');//for check pause or play add a class $('video').click(function() { if ($(this).hasClass('pause')) { $("video").trigger("play"); $(this).removeClass('pause'); $(this).addClass('play'); } else { $("video").trigger("pause"); $(this).removeClass('play'); $(this).addClass('pause'); } })
静音和取消静音
$('body').find("video").attr('id', 'video') var myVid = document.getElementById("video"); $('.sound-icon').click(function() { //here "sound-icon" is a anchor class. var sta = myVid.muted; if (sta == true) { myVid.muted = false; } else { myVid.muted = true; } })
HTML 5中播放视频的方法:
Try this page in Safari 4! Or you can download the video instead.
自动播放:
使用poster在视频无法加载时显示图片:
一个比较简洁的例子:
下面是一个比较完整的例子:
Full player example
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用jQuery控制HTML5视频播放/暂停”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
当前名称:如何使用jQuery控制HTML5视频播放/暂停
本文地址:http://scyanting.com/article/iggedg.html