-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplayer.html
154 lines (152 loc) · 5.79 KB
/
player.html
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title>m3u8视频在线播放器</title>
<style>
html,body{height:100%;}
.logo img{height:32px;margin-top:-4px}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<!--https://www.bootcdn.cn/video.js/-->
<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<!--https://www.bootcdn.cn/videojs-contrib-hls/-->
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script>
function ChangeM3u8(){
var play = document.getElementById('video-url').value
var url = location.href
url = url.split('?')[0]+'?play='+play
location.href = url
}
function QueryString(qs){
var url = location.href
url = url.replace('?','?&').split('&')
var re = ''
for(var i=1;i < url.length;i++){
if(url[i].indexOf(qs+'=')==0){
re = url[i].replace(qs+'=','')
break
}
}
return re
}
function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
</script>
</head>
<body style="background-color:#16161A;">
<div style="background:#2A2A32;height:7%;padding-left:3%;display:flex;align-items:center;" >
<img src="" alt=""class="mr-2"><a id = "webhead" class = "navbar-brand logo" style="color:white;font-size:1.3em" href="">M3U8播放器</a>
</div>
<div id="videodiv" style="height:25%;width:auto;margin-top:13px;margin-left:10px;margin-right:10px;background:#16161A">
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="" height="" data-setup='{}'>
<source id="source" src="" type="application/x-mpegURL">
</video>
<div>
<div class="input-group my-3">
<input id="video-url" required="" name="play" type="text" class="form-control nice" placeholder="输入 M3U8 URL 地址" value="" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-dark js-play border-0" type="button" onclick="ChangeM3u8()">点击播放</button>
</div>
</div>
</body>
<script>
if(IsPC()){
document.getElementById('videodiv').style="margin:0 auto;height:83%;width:78%;margin-top:17px;"
}
var play = QueryString('play')
if(play != ''){
document.getElementById('video-url').value = play
document.getElementById('source').src = play
}
var width = document.getElementById('videodiv').offsetWidth
var height = document.getElementById('videodiv').offsetHeight
document.getElementById('myVideo').setAttribute('width',width)
document.getElementById('myVideo').setAttribute('height',height)
var total_h = document.body.clientHeight
var footer_h = document.getElementById('footer').offsetTop
// videojs 简单使用
var myVideo = videojs('myVideo',{
bigPlayButton : true,
textTrackDisplay : false,
posterImage: false,
errorDisplay : true,
controlBar: {volumePanel:{inline:false}},
playbackRates: [0.5,1,1.25,1.5,2],
},function(){
this.on('error',function(){
myVideo.errorDisplay.close()
alert('小主，地址解析错误≥﹏≤ \n 请检查链接是否正确')
})
}
)
myVideo.play() // 视频播放
myVideo.pause() // 视频暂停
var vol = 0.1; //1代表100%音量，每次增减0.1
var time = 10; //单位秒，每次增减10秒
document.onkeyup = function (event) {//键盘事件
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode === 37) {
// 按 向左键
c_time = myVideo.currentTime()
if(c_time-time > 0){
myVideo.currentTime(c_time-time)
}else{
myVideo.currentTime(0)
}
return false;
}else if (e && e.keyCode === 39) {
// 按 向右键
c_time = myVideo.currentTime()
d_time = myVideo.duration();
if(c_time+time > d_time){
myVideo.currentTime(d_time)
}else{
myVideo.currentTime(c_time+time)
}
return false;
}else if (e && e.keyCode === 38) {
// 按 向上键
c_volume = myVideo.volume()
if(c_volume+vol > 1){
myVideo.volume(1)
}else{
myVideo.volume(c_volume+vol)
}
return false;
}else if (e && e.keyCode === 40) {
// 按 向下键
c_volume = myVideo.volume()
if(c_volume-vol < 0){
myVideo.volume(0)
}else{
myVideo.volume(c_volume-vol)
}
return false;
}else if (e && e.keyCode === 32) {
// 按 空格键
if (myVideo.paused()){
myVideo.play()
}else{
myVideo.pause()
}
return false;
}
}
</script>
</html>