feat(H5): 调整样式尺寸并添加视频播放功能
- 修改了H5页面的CSS和LESS文件中的尺寸样式 - 添加了新的HTML文件实现视频播放器功能 - 新增WASM文件支持视频解码
This commit is contained in:
DESKTOP-RQ919RC\Pc
81
3.html
Normal file
81
3.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
|
||||
<meta charset="utf-8" />
|
||||
<title>h265webjs - https://github.com/numberwolf/h265web.js</title>
|
||||
<meta charset="utf-8" name="author" content="ChangYanlong" />
|
||||
<meta charset="utf-8" name="email" content="porschegt23@foxmail.com" />
|
||||
<meta charset="utf-8" name="discord" content="numberwolf#8694" />
|
||||
<script src="./js/dist-play.js"></script>
|
||||
<style></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="coverLayer" hidden="hidden">
|
||||
<center>
|
||||
<button id="coverLayerBtn"><font size="100px">PLAY</font></button>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<div id="player-container">
|
||||
<div id="glplayer" class="glplayer"></div>
|
||||
<div id="controller" class="controller">
|
||||
<div id="progress-contaniner" class="progress-common progress-contaniner">
|
||||
<div id="cachePts" class="progress-common cachePts"></div>
|
||||
<div id="progressPts" class="progress-common progressPts"></div>
|
||||
</div>
|
||||
|
||||
<div id="operate-container" class="operate-container">
|
||||
<li id="playBar" class="playBtn">
|
||||
<a href="javascript:void(0)" title="start">Start</a>
|
||||
</li>
|
||||
|
||||
<span id="ptsLabel" class="ptsLabel">00:00:00/00:00:00</span>
|
||||
<div class="voice-div">
|
||||
<span>
|
||||
<a id="muteBtn" class="muteBtn" href="javascript:void(0)">
|
||||
<svg class="icon" style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="488">
|
||||
<path d="M153.6 665.6V358.4h204.8V256H153.6c-56.32 0-102.4 46.08-102.4 102.4v307.2c0 56.32 46.08 102.4 102.4 102.4h204.8v-102.4H153.6zM358.4 256v102.4l204.8-128v563.2L358.4 665.6v102.4l307.2 204.8V51.2zM768 261.12v107.52c61.44 20.48 102.4 76.8 102.4 143.36s-40.96 122.88-102.4 143.36v107.52c117.76-25.6 204.8-128 204.8-250.88s-87.04-225.28-204.8-250.88z" p-id="489"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<progress id="progressVoice" class="progressVoice" value="50" max="100"></progress>
|
||||
</div>
|
||||
|
||||
<a id="fullScreenBtn" class="fullScreenBtn" href="javascript:void(0)">
|
||||
<svg class="icon" style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="403">
|
||||
<path d="M167.8 903.1c-11.5 0-22.9-4.4-31.7-13.1-17.5-17.5-17.5-45.8 0-63.3l221.1-221.1c17.5-17.5 45.9-17.5 63.3 0 17.5 17.5 17.5 45.8 0 63.3L199.4 890c-8.7 8.7-20.2 13.1-31.6 13.1zM638.5 432.4c-11.5 0-22.9-4.4-31.7-13.1-17.5-17.5-17.5-45.8 0-63.3l221.7-221.7c17.5-17.5 45.8-17.5 63.3 0s17.5 45.8 0 63.3L670.1 419.3c-8.7 8.7-20.2 13.1-31.6 13.1zM859.7 903.8c-11.5 0-23-4.4-31.7-13.1L606.7 668.8c-17.5-17.5-17.4-45.9 0.1-63.4s45.9-17.4 63.3 0.1l221.4 221.9c17.5 17.5 17.4 45.9-0.1 63.4-8.8 8.7-20.2 13-31.7 13zM389 432.1c-11.5 0-23-4.4-31.7-13.1L136.1 197.2c-17.5-17.5-17.4-45.9 0.1-63.4s45.9-17.4 63.3 0.1l221.2 221.7c17.5 17.5 17.4 45.9-0.1 63.4-8.7 8.7-20.2 13.1-31.6 13.1z" fill="#ffffff" p-id="404"></path>
|
||||
<path d="M145 370c-24.7 0-44.8-20.1-44.8-44.8V221.8C100.2 153.5 155.7 98 224 98h103.4c24.7 0 44.8 20.1 44.8 44.8s-20.1 44.8-44.8 44.8H224c-18.9 0-34.2 15.3-34.2 34.2v103.4c0 24.7-20.1 44.8-44.8 44.8zM883.3 370c-24.7 0-44.8-20.1-44.8-44.8V221.8c0-18.9-15.3-34.2-34.2-34.2H700.8c-24.7 0-44.8-20.1-44.8-44.8S676.1 98 700.8 98h103.5c68.2 0 123.8 55.5 123.8 123.8v103.5c0 24.7-20.1 44.7-44.8 44.7zM327.5 926.6H224c-68.2 0-123.8-55.5-123.8-123.8V699.4c0-24.7 20.1-44.8 44.8-44.8s44.8 20.1 44.8 44.8v103.5c0 18.9 15.3 34.2 34.2 34.2h103.5c24.7 0 44.8 20.1 44.8 44.8s-20.1 44.7-44.8 44.7zM804.3 926.6H700.8c-24.7 0-44.8-20.1-44.8-44.8s20.1-44.8 44.8-44.8h103.5c18.9 0 34.2-15.4 34.2-34.2V699.4c0-24.7 20.1-44.8 44.8-44.8 24.7 0 44.8 20.1 44.8 44.8v103.5c0 68.2-55.6 123.7-123.8 123.7z" fill="#ffffff" p-id="405"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<span id="showLabel" class="showLabel"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
|
||||
var type = "mp4";
|
||||
var url = "https://h265web.com/hevc_test_moov_set_head_16s.mp4";
|
||||
const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认内核 recommand!!!!!!
|
||||
const PLAYER_CORE_TYPE_CNATIVE = 1; // 测试内核 FLV请用此内核(FLV VOD use this mode)
|
||||
var config = {
|
||||
type: type,
|
||||
player: "glplayer",
|
||||
width: 960,
|
||||
height: 540,
|
||||
accurateSeek: true,
|
||||
token: token,
|
||||
extInfo: {
|
||||
core: PLAYER_CORE_TYPE_DEFAULT,
|
||||
// core : PLAYER_CORE_TYPE_CNATIVE,
|
||||
coreProbePart: 0.4,
|
||||
moovStartFlag: true,
|
||||
readyShow: true,
|
||||
ignoreAudio: 0,
|
||||
},
|
||||
};
|
||||
makeH265webjs(url, config);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
20
H5/h5.css
20
H5/h5.css
@@ -405,8 +405,8 @@ body {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 3.48rem;
|
||||
height: 1.24rem;
|
||||
width: 3.72rem;
|
||||
height: 1.48rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .interview-box .ok {
|
||||
@@ -473,7 +473,21 @@ body {
|
||||
.admission-officer .interview-list .item:last-of-type {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.admission-officer .interview-list .item .img {
|
||||
.admission-officer .interview-list .item .img-box {
|
||||
position: relative;
|
||||
width: 3.92rem;
|
||||
height: 2.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.admission-officer .interview-list .item .img-box .play {
|
||||
width: 0.6667rem;
|
||||
height: 0.6667rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.admission-officer .interview-list .item .img-box .img {
|
||||
width: 3.92rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
28
H5/h5.less
28
H5/h5.less
@@ -475,8 +475,8 @@ body {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 3.48rem;
|
||||
height: 1.24rem;
|
||||
width: 3.72rem;
|
||||
height: 1.48rem;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -554,11 +554,27 @@ body {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.img {
|
||||
.img-box {
|
||||
position: relative;
|
||||
width: 3.92rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.play {
|
||||
width: 0.6667rem;
|
||||
height: 0.6667rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 3.92rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -663,7 +679,7 @@ body {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: .3467rem;
|
||||
font-size: 0.3467rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.06rem;
|
||||
position: relative;
|
||||
@@ -699,7 +715,7 @@ body {
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: .2933rem;
|
||||
font-size: 0.2933rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
748
js/dist-play.js
Normal file
748
js/dist-play.js
Normal file
File diff suppressed because one or more lines are too long
BIN
js/missile-v20210718.wasm
Normal file
BIN
js/missile-v20210718.wasm
Normal file
Binary file not shown.
Reference in New Issue
Block a user