NPlayerH5弹幕播放器-清晰度切换

清晰度切换


这个例子是使用 ControlItem 来实现视频的清晰度切换功能，这里使用 HLS，来切换视频清晰度。

1. import Player, { Popover } from "nplayer"
   
2. import Hls from "hls.js"
   
3. 
   
4. // 1. 首先创建一个控制条项
   
5. const Quantity = {
   
6.   el: document.createElement("div"),
   
7.   init() {
   
8.     this.btn = document.createElement("div")
   
9.     this.btn.textContent = "画质";
   
10.     this.el.appendChild(this.btn)
    
11.     this.popover = new Popover(this.el)
    
12.     this.btn.addEventListener("click", () => this.popover.show())
    
13.     // 点击按钮的时候展示 popover
    
14.     this.el.style.display = "none"
    
15.     // 默认隐藏
    
16.     this.el.classList.add("quantity")
    
17.   }
    
18. }
    
19. 
    
20. // 2. 我们把它放到 spacer 后面
    
21. window.player = new Player({
    
22.   controls: [
    
23.     [
    
24.       "play",
    
25.       "volume",
    
26.       "time",
    
27.       "spacer",
    
28.       Quantity,
    
29.       "airplay",
    
30.       "settings",
    
31.       "web-fullscreen",
    
32.       "fullscreen"
    
33.     ],
    
34.     ["progress"]
    
35.   ]
    
36. })
    
37. 
    
38. // 3. 创建 HLS 实例
    
39. const hls = new Hls()
    
40. hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    
41.   hls.on(Hls.Events.MANIFEST_PARSED, function () {
    
42.     // 4. 给清晰度排序，清晰度越高的排在最前面
    
43.     hls.levels.sort((a, b) => b.height - a.height)
    
44.     const frag = document.createDocumentFragment()
    
45.     // 5. 给与清晰度对应的元素添加，点击切换清晰度功能
    
46.     const listener = (i) => (init) => {
    
47.       const last = Quantity.itemElements[Quantity.itemElements.length - 1]
    
48.       const prev = Quantity.itemElements[Quantity.value] || last
    
49.       const el = Quantity.itemElements[i] || last
    
50.       prev.classList.remove("quantity_item-active")
    
51.       el.classList.add("quantity_item-active")
    
52.       Quantity.btn.textContent = el.textContent
    
53.       if (init !== true && !window.player.paused)
    
54.         setTimeout(() => window.player.play())
    
55.       // 因为 HLS 切换清晰度会使正在播放的视频暂停，我们这里让它再自动恢复播放
    
56.       Quantity.value = hls.currentLevel = hls.loadLevel = i
    
57.       Quantity.popover.hide()
    
58.     }
    
59.     // 6. 添加清晰度对应元素
    
60.     Quantity.itemElements = hls.levels.map((l, i) => {
    
61.       const el = document.createElement("div")
    
62.       el.textContent = l.name + "P"
    
63.       if (l.height === 1080) el.textContent += " 超清"
    
64.       if (l.height === 720) el.textContent += " 高清"
    
65.       if (l.height === 480) el.textContent += " 清晰"
    
66.       el.classList.add("quantity_item")
    
67.       el.addEventListener("click", listener(i))
    
68.       frag.appendChild(el)
    
69.       return el
    
70.     })
    
71. 
    
72.     const el = document.createElement("div")
    
73.     el.textContent = "自动"
    
74.     el.addEventListener("click", listener(-1))
    
75.     el.classList.add("quantity_item")
    
76.     frag.appendChild(el)
    
77.     Quantity.itemElements.push(el)
    
78.     // 这里再添加一个 `自动` 选项，HLS 默认是根据网速自动切换清晰度
    
79. 
    
80.     Quantity.popover.panelEl.appendChild(frag)
    
81.     Quantity.el.style.display = "block"
    
82. 
    
83.     listener(hls.currentLevel)(true)
    
84.     // 初始化当前清晰度
    
85.   });
    
86. 
    
87.   // 绑定 video 元素成功的时候，去加载视频
    
88.   hls.loadSource("https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8");
    
89. })
    
90. 
    
91. hls.attachMedia(window.player.video)
    
92. window.player.mount("#app")

复制代码

1. .quantity {
   
2.   position: relative;
   
3.   padding: 0 8px;
   
4.   cursor: pointer;
   
5.   font-size: 14px;
   
6.   font-weight: bold;
   
7.   white-space: nowrap;
   
8.   opacity: 0.8;
   
9. }
   
10. .quantity:hover {
    
11.   opacity: 1;
    
12. }
    
13. .quantity_item {
    
14.   padding: 5px 20px;
    
15.   font-weight: normal;
    
16. }
    
17. .quantity_item:hover {
    
18.   background: rgba(255, 255, 255, 0.3);
    
19. }
    
20. .quantity_item-active {
    
21.   color: var(--theme-color);
    
22. }

复制代码