<link rel="stylesheet" href="https://npm.elemecdn.com/plyr@3.7.2/dist/plyr.css"/> <style> :root { --plyr-color-main: #8AC24A; --plyr-video-control-background-hover: #8AC24A; } </style> <img src="https://file.maizi.xyz/pic/A7B4ADD2BD3C7AC4.jpg" style="display: none;"> <div class="container"> <video controls crossorigin playsinline data-poster="https://file.maizi.xyz/hls/101/poster.png"> <source src="https://file.maizi.xyz/hls/101/playlist.m3u8"> </video> </div> <script src="https://npm.elemecdn.com/plyr@3.7.2/dist/plyr.min.js"></script> <script src="https://lib.baomitu.com/hls.js/latest/hls.min.js"></script> <script> document.addEventListener("DOMContentLoaded", () => { const video = document.querySelector("video"); const source = video.getElementsByTagName("source")[0].src; // For more options see: https://github.com/sampotts/plyr/#options const defaultOptions = { captions: { active: true, update: true, language: 'cn' }, tooltips: { controls: true, seek: true }, i18n: { restart: '重播', rewind: '快退 {seektime} 秒', play: '播放', pause: '暂停', fastForward: '快进 {seektime} 秒', seek: '寻找', played: '已播放', buffered: '缓冲', currentTime: '播放时长', duration: '总时长', volume: '音量', mute: '静音', unmute: '取消静音', enableCaptions: '开启字幕', disableCaptions: '关闭字幕', enterFullscreen: '全屏', exitFullscreen: '退出全屏', frameTitle: '{title} 播放器', captions: '字幕', settings: '设定', speed: '速度', normal: '正常', quality: '画质', pip: '画中画', loop: '循环播放', start: '开始', end: '結束', all: '全部', reset: '重置', disabled: '关闭', advertisement: '广告', qualityLabel: { 0: 'Auto', }, }, }; if (Hls.isSupported()) { // For more Hls.js options, see https://github.com/dailymotion/hls.js var hls = new Hls(); hls.loadSource(source); hls.attachMedia(video); window.hls = hls; // From the m3u8 playlist, hls parses the manifest and returns // all available video qualities. This is important, in this approach, // we will have one source on the Plyr player. hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { // Transform available levels into an array of integers (height values). const availableQualities = hls.levels.map((l) => l.height) availableQualities.unshift(0) //prepend 0 to quality array // Add new qualities to option defaultOptions.quality = { default: 0, //Default - AUTO options: availableQualities, forced: true, onChange: (e) => updateQuality(e), } // Add Auto Label hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) { var span = document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span") if (hls.autoLevelEnabled) { span.innerHTML = `Auto (${hls.levels[data.level].height}p)` } else { span.innerHTML = `Auto` } }) // Initialize new Plyr player with quality options var player = new Plyr(video, defaultOptions); player.on('languagechange', () => { // Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994 setTimeout(() => hls.subtitleTrack = player.currentTrack, 50); }); }); } else { // default options with no quality update in case Hls is not supported var player = new Plyr(video, defaultOptions); } function updateQuality(newQuality) { if (newQuality === 0) { window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0 } else { window.hls.levels.forEach((level, levelIndex) => { if (level.height === newQuality) { console.log("Found quality match with " + newQuality); window.hls.currentLevel = levelIndex; } }); } } }); </script>
