Plyr轻量级H5 Web播放器 - Demo JS

Plyr轻量级H5 Web播放器 - Demo JS

1. const source = 'https://xxx.com/2023/index.M3U8';//视频地址
   
2. const video = document.querySelector('video');
   
3. const player = new Plyr(video, {
   
4.         autoplay: false,
   
5.         volume: 1,
   
6.         ratio: '16:9',
   
7.         preload: 'auto',
   
8.         speed: {
   
9.                 selected: 1,
   
10.                 options: [0.5, 1, 1.5, 2]
    
11.         },
    
12.         fullscreen: {
    
13.                 enabled: true,
    
14.                 fallback: true,
    
15.                 iosNative: true,
    
16.         },
    
17.         captions: {
    
18.                 active: true,
    
19.                 update: false,
    
20.                 language: 'auto'
    
21.         },
    
22.         i18n: {
    
23.                 restart: '重播',
    
24.                 play: '播放',
    
25.                 pause: '暂停',
    
26.                 volume: '音量',
    
27.                 mute: '静音',
    
28.                 pip: '画中画',
    
29.                 normal: '默认',
    
30.                 quality: '画质',
    
31.                 download: '下载',
    
32.                 enterFullscreen: '全屏',
    
33.                 exitFullscreen: '关闭全屏',
    
34.                 captions: 'Captions',
    
35.                 settings: '设置',
    
36.                 speed: '倍速',
    
37.                 loop: '循环播放',
    
38.         },
    
39. });                               
    
40. if(source.indexOf('.M3U8')>-1){
    
41.         if (!HLS.isSupported()) {
    
42.                 video.src = source;
    
43.         } else {
    
44.                 const hls = new Hls();
    
45.                 hls.loadSource(source);
    
46.                 hls.attachMedia(video);
    
47.                 window.hls = hls;
    
48.                 player.on('languagechange', () => {
    
49.                         setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
    
50.                 })
    
51.         }
    
52. };
    
53. window.player = player;

复制代码