1 <!DOCTYPE html>
2 <html>
3 <head>
4
<meta content="width=device-width,initial-scale=1">
5
<title>video demo</title>
6
<style type="text/css">
7
html,body {
8
padding: 0;
9
margin: 0;
10
width: 100%;
11
height: 100%;
12
-webkit-user-select: none;
13
user-select: none;
14
overflow: hidden;
15
}
16
17
.videobox {
18
width: 100%;
19
position: absolute;
20
left: 0;
21
top: 0;
22
overflow: hidden;
23
}
24
25
video{
26
width: 100%;
27
height: 100%;
28
}
29
#open{
30
width: 50px;
31
height: 50px;
32
background-color: #f91;
33
z-index: 99;
34
font-size: 17px;
35
position: absolute;
36
top: 12%;
37
left: 50%;
38
transform: translateX(-50%)
39
}
40
#close{
41
position: absolute;
42
width: 50px;
43
height: 50px;
44
background-color: #f91;
45
z-index: 99;
46
font-size: 17px;
47
}
48
</style>
49 </head>
50 <body>
51
<div>
52
<video webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4" loop="true" poster=\'\' controls="true"></video>
53
</div>
54
<div>
55
<video webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4" poster=\'\'></video>
56
</div>
57
<div>开始1</div>
58
<div>开始2</div>
59
60
<script
61 src="http://code.jquery.com/jquery-3.4.0.min.js"
62 integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
63 crossorigin="anonymous"></script>
64
<script>
65
var op = document.getElementById(\'open\')
66
var cl = document.getElementById(\'close\')
67
var v = document.getElementById(\'mainvideo\')
68
var v1 = document.getElementById(\'bbb\')
69
70
op.onclick = function(){
71
v.play()
72
73
}
74
cl.onclick = function(){
75
v1.play()
76
}
77
// 不要设置自动播放
78
v1.ontimeupdate =function(){
79
if(v1.duration-v1.currentTime<= 0){
80
console.log(11111111111111111)
81
// v1.pause()
82
}
83
}
84
85
// 页面只有一个视频可以播放
86
var videos = document.getElementsByTagName(\'video\');
87
for (var i = videos.length - 1; i >= 0; i--) {
88
(function(){
89
var p = i;
90
videos[p].addEventListener(\'play\',function(){
91
pauseAll(p);
92
})
93
})()
94
}
95
function pauseAll(index){
96
for (var j = videos.length - 1; j >= 0; j--) {
97
if (j!=index) videos[j].pause();
98
}
99
100
}
101
102
</script>
103 </body>
104 </html>