本文档原始链接：http://blog.okbase.net/jquery2000/archive/4485.html；

我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。
我的代码是这样的：

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

但发现这样不行，而用以下的js是可以的：

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

解决方法：
play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，代码如下：

1
$('#videoId').get(0).play();

最简单的方法实现Play和Pause:

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

点击视频就能播放和暂停

1
2
3
4
5
6
7
8
9
10
11
12
13
$("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');
}
})

静音和取消静音

1
2
3
4
5
6
7
8
9
10
11
$('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中播放视频的方法：

1
2
3
4
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
<p> Try this page in Safari 4! Or you can
<a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

自动播放：

1
2
<video src="abc.mov" autoplay>
</video>

使用poster在视频无法加载时显示图片：

1
2
3
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p>Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

一个比较简洁的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
<a href="demo.mp4">Download the video</a> file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)">&lt;&lt;</button>
<button id="play" onclick="vidplay()">&gt;</button>
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>

下面是一个比较完整的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html >
<head>
<title>Full player example</title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
<script type="text/javascript">
function init() { // Master function, encapsulates all functions
var video = document.getElementById("Video1");
if (video.canPlayType) { // tests that we have HTML5 video support
// if successful, display buttons and set up events
document.getElementById("buttonbar").style.display = "block";
document.getElementById("inputField").style.display = "block";
// helper functions
// play video
function vidplay(evt) {
if (video.src == "") { // inital source load
getVideo();
}
button = evt.target; // get the button id to swap the text based on the state
if (video.paused) { // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else { // pause the file, and display play symbol
video.pause();
button.textContent = ">";
}
}
// load video file from input field
function getVideo() {
var fileURL = document.getElementById("videoFile").value; // get input field
if (fileURL != "") {
video.src = fileURL;
video.load(); // if HTML source element is used
document.getElementById("play").click(); // start play
} else {
errMessage("Enter a valid video URL"); // fail silently
}
}
  
// button helper functions
// skip forward, backward, or restart
function setTime(tValue) {
// if no video is loaded, this throws an exception
try {
if (tValue == 0) {
video.currentTime = tValue;
}
else {
video.currentTime += tValue;
}
} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}
// display an error message
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent = msg;
setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
}
// change volume based on incoming value
function setVol(value) {
var vol = video.volume;
vol += value;
// test for range 0 - 1 to avoid exceptions
if (vol >= 0 && vol <= 1) {
// if valid value, use it
video.volume = vol;
} else {
// otherwise substitute a 0 or 1
video.volume = (vol < 0) ? 0 : 1;
}
}
// button events
// Play
document.getElementById("play").addEventListener("click", vidplay, false);
// Restart
document.getElementById("restart").addEventListener("click", function () {
setTime(0);
}, false);
// Skip backward 10 seconds
document.getElementById("rew").addEventListener("click", function () {
setTime(-10);
}, false);
// Skip forward 10 seconds
document.getElementById("fwd").addEventListener("click", function () {
setTime(10);
}, false);
// set src == latest video file URL
document.getElementById("loadVideo").addEventListener("click", getVideo, false);
// fail with message
video.addEventListener("error", function (err) {
errMessage(err);
}, true);
// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1); // up by 10%
}, false);
// playback speed buttons
document.getElementById("slower").addEventListener("click", function () {
video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function () {
video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function () {
video.playbackRate = 1;
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
}
}, false);
} // end of runtime
}// end of master
</script>
</head>
<body onload="init();" >
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element">
HTML5 Video is required for this example
</video>
<div id="buttonbar" style="display: none;")>
<button id="restart" title="Restart button">[]</button>
<button id="slower" title="Slower playback button">-</button>
<button id="rew" title="Rewind button" >&lt;&lt;</button>
<button id="play" title="Play button">&gt;</button>
<button id="fwd" title="Forward button" >&gt;&gt;</button>
<button id="faster" title="Faster playback button">+</button>
<button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
<br />
<label>Playback </label>
<label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>
<label> Volume </label>
<button id="volDn" title="Volume down button">-</button>
<button id="volUp" title="Volume up button">+</button>
<button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
</div>
<br/>
<div id= "inputField" style="display:none;" >
<label>Type or paste a video URL: <br/>
<input type="text" id="videoFile" style="width: 300px;" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button id="loadVideo" title="Load video button" >Load</button>
</label>
</div>
<div title="Error message area" id="errorMsg" style="color:Red;"></div>
</body>
</html>

JQuery播放暂停HTML视频相关推荐

  1. 【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )

    FFmpeg 系列文章目录 [FFmpeg]Windows 搭建 FFmpeg 命令行运行环境 [FFmpeg]FFmpeg 相关术语简介 ( 容器 | 媒体流 | 数据帧 | 数据包 | 编解码器 ...

  2. Android 仿朋友圈,文字图片视频多条目,自动播放暂停

    因为太长了不能把项目搬过来,记一下关键点 多条目都会,然而这里因为微信朋友圈界面的特殊,他有一个头部,开始我是做的ScrollView+RecyclerView,后来发现在Scrollview 的包裹 ...

  3. 安卓音乐播放时微信视频微信语音电话进来音乐暂停播放

    最近项目中遇到一个问题,app内音乐后台播放时,如果有电话或者微信视频通话进来,app后台音乐还在播放.这样就造成用户体验不好,研究了市面上的音乐播放器,比如网易云音乐就很好的做到了如果有微信视频或者 ...

  4. H5 视频Video 元素及常用事件 播放 暂停 初始化 设置播放时间禁用下载等

    H5 视频Video 元素及常用事件 播放 暂停 初始化 设置播放时间 常用属性 自动播放: autoplay 显示常用工具栏: controls 是否重复播放: loop 视频总长度: durati ...

  5. html5实现视频（放大缩小播放暂停）

    效果如下图: <!DOCTYPE html> <html> <body> <meta charset="utf-8"> <di ...

  6. Android仿微博实现列表滑动播放/暂停视频

    本文仿照新浪微博/QQ空间实现了滑动自动播放视频的功能. 本文来自个人博客:http://www.zhangliwei.date 如有疑问欢迎讨论,感谢您的关注. 先上效果图 关键代码 1.监听滚动事 ...

  7. 用html5播放两个视频,HTML5视频 - 如何进行无缝播放和/或几个视频循环？

    尝试过各种各样的事情后,我终于能够创造出似乎是一个工作解决方案.我还没有在旧版浏览器或其他操作系统上测试过这个版本,但是这个版本可以在最新版本的Chrome,IE,Firefox和Opera上运行. ...

  8. iOS开发-ZFPlayer的简单使用 播放单个网络视频

    iOS开发-ZFPlayer的简单使用 播放单个网络视频 前言 开发准备 代码 注意 前言 关于ZFPlayer播放单个网络视频案例,它的网络列表视频案例在gitHub上面很多. 开发准备 podfi ...

  9. Android Studio 实现播放本地/网络视频

    Android Studio 实现播放本地/网络视频 目的 工具及环境 功能设计 VideoView 简介 常用方法 代码解释 本地视频播放器 activity_main.xml MainActivi ...

最新文章

  1. 挤牙膏只服英特尔！新酷睿14nm+++，性能竟超过AMD 7nm？
  2. python基础语法手册format-Python-输出格式化format()方法的基本使用(2)
  3. 智慧树python程序设计基础山东联盟期末答案_智慧树Python程序设计基础（山东联盟）期末答案...
  4. mysql的联合索引_mysql联合索引
  5. 程序员必备技能-科学砍需求
  6. Maven 打包时不执行测试用例
  7. HOOK -- IAT HOOK 本进程MessageBox
  8. SAP UI5 应用开发教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解
  9. ABP vnext模块化架构的最佳实践的实现
  10. 网站决策分析软件WebBI
  11. 堆排序的Python实现
  12. java 内部类_java的内部类和静态内部类（嵌套类）
  13. 解决office2003无法卸载的问题
  14. Wind的实时行情API使用
  15. 阿里云储存OSS（服务端签名后前端直传）
  16. 关于outlook不能发送126邮件的问题
  17. mysql新建用户并授权管理员_MySQL数据库新建用户与授权方法
  18. pyQt5 帮助手册的使用
  19. 写给女儿的话---小荷作文万米写书序言
  20. 从前慢-项目小型秒杀系统

热门文章

  1. 凉都秘境——六盘水市
  2. Word count通过mr实现China的编程
  3. webpack坑系列--安装webpack-cli
  4. vue.js毕业设计，基于vue.js前后端分离教室预约系统（H5移动项目） 开题报告
  5. 卷积神经网络（CNN）图像识别知识总结
  6. python播放网页视频_python如何播放视频
  7. MATLAB plot3绘制的不是三维图
  8. C语言练习：该存多少钱
  9. PCIE 3.0 4.0 GEN3 GEN4 速度如何
  10. 【计算机网络】 如何看懂路由表