怎么在网页中实现自动调整视频的清晰度
本文作者： Eson Wong
·
2024-09-11
·
via Eson Wong's Blog
)
HTTP Live Streaming (HLS) 是 Apple 开发的一种流媒体协议。能够根据用户的网络状况自动调整视频的清晰度。它将整个视频分成一系列小的 HTTP 文件，每个文件包含一小段视频内容。这种方式可以让视频在不同的网络环境下更加流畅地播放。
本文们将介绍如何在网页中使用实现基于 HLS 视频播放，并显示当前播放的分辨率。
使用 FFmpeg 生成 HLS 视频流
转码视频为多码率版本
使用 FFmpeg 命令行工具将原始视 input.mp4 频转码为多个分辨率（1080p、720p、480p）的 HLS 视频：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ffmpeg -i input.mp4 \
-filter_complex \
"[0:v]split=3[v1][v2][v3]; \
[v1]scale=1920:1080[v1out]; \
[v2]scale=1280:720[v2out]; \
[v3]scale=854:480[v3out]" \
-map "[v1out]" -map 0:a -c:v:0 libx264 -b:v:0 5000k -maxrate:v:0 5350k -bufsize:v:0 7500k \
-map "[v2out]" -map 0:a -c:v:1 libx264 -b:v:1 3000k -maxrate:v:1 3210k -bufsize:v:1 4500k \
-map "[v3out]" -map 0:a -c:v:2 libx264 -b:v:2 1500k -maxrate:v:2 1605k -bufsize:v:2 2250k \
-c:a aac -b:a 128k -ac 2 \
-f hls -hls_time 6 -hls_list_size 0 \
-hls_segment_filename 'stream_%v/segment_%03d.ts' \
-master_pl_name master.m3u8 \
-var_stream_map "v:0,a:0 v:1,a:1 v:2,a:2" \
'stream_%v/index.m3u8'
|
生成的文件包括：
master.m3u8: 主播放列表。stream_0/: 1080p 版本的切片。stream_1/: 720p 版本。stream_2/: 480p 版本。
在网页中实现 HLS 视频的播放
使用以下 HTML 和 JavaScript 代码来播放 HLS 视频并显示当前分辨率
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自动切换清晰度的视频示例</title>
<style>
#resolution-display {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
border-radius: 5px;
}
#video-container {
position: relative;
display: inline-block;
}
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video id="video" controls></video>
<div id="resolution-display">分辨率：未知</div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
var video = document.getElementById("video");
var resolutionDisplay = document.getElementById("resolution-display");
var videoSrc = "./video/video2/master.m3u8";
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
updateResolution();
});
hls.on(Hls.Events.LEVEL_LOADED, function (event, data) {
updateResolution();
});
function updateResolution() {
var level = hls.levels[hls.currentLevel];
if (level) {
var width = level.width;
var height = level.height;
resolutionDisplay.textContent = "分辨率：" + width + "x" + height;
}
}
}
else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = videoSrc;
video.addEventListener("loadedmetadata", function () {
video.play();
resolutionDisplay.textContent =
"分辨率：" + video.videoWidth + "x" + video.videoHeight;
});
} else {
console.error("该浏览器不支持 HLS 播放。");
}
</script>
</body>
</html>
|
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
