m3u8 player All In One

m3u8 player All In One

m3u8 是一种基于 HTTP Live Streaming 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。
目前由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持，你可以直接通过 video.src = '.m3u8'来实现。

HLS

https://en.wikipedia.org/wiki/HTTP_Live_Streaming

Web Video API

https://developer.mozilla.org/en-US/docs/Web/API

const videoDecoder = new VideoDecoder({
  output: processVideo,
  error: onEncoderError,
});

https://developer.mozilla.org/en-US/docs/Web/API/VideoDecoder/VideoDecoder

const videoEncoder = new VideoEncoder({
  output(chunk, metadata) {
    console.log(chunk.timestamp);
    console.log(chunk.byteLength);
    console.log(JSON.stringify(metadata));
  },
  error(error) {
    console.log(error);
  },
});

https://developer.mozilla.org/en-US/docs/Web/API/VideoEncoder/VideoEncoder

Web Audio API

// for legacy browsers
const AudioContext = window.AudioContext || window.webkitAudioContext;

const audioContext = new AudioContext();

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

demos

console.clear();
// instigate our audio context

// for cross browser
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

// load some sound
const audioElement = document.querySelector('audio');
const track = audioCtx.createMediaElementSource(audioElement);
const playButton = document.querySelector('.tape-controls-play');

// play pause audio
playButton.addEventListener('click', function() {

  // check if context is in suspended state (autoplay policy)
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  if (this.dataset.playing === 'false') {
    audioElement.play();
    this.dataset.playing = 'true';
  // if track is playing pause it
  } else if (this.dataset.playing === 'true') {
    audioElement.pause();
    this.dataset.playing = 'false';
  }
  let state = this.getAttribute('aria-checked') === "true" ? true : false;
  this.setAttribute( 'aria-checked', state ? "false" : "true" );
}, false);

// if track ends
audioElement.addEventListener('ended', () => {
  playButton.dataset.playing = 'false';
  playButton.setAttribute( "aria-checked", "false" );
}, false);

// volume
const gainNode = audioCtx.createGain();
const volumeControl = document.querySelector('[data-action="volume"]');

volumeControl.addEventListener('input', function() {
  gainNode.gain.value = this.value;
}, false);

// panning
const pannerOptions = {pan: 0};
const panner = new StereoPannerNode(audioCtx, pannerOptions);
const pannerControl = document.querySelector('[data-action="panner"]');
pannerControl.addEventListener('input', function() {
  panner.pan.value = this.value;
}, false);

// connect our graph
track.connect(gainNode).connect(panner).connect(audioCtx.destination);

const powerButton = document.querySelector('.control-power');
powerButton.addEventListener('click', function() {
  if (this.dataset.power === 'on') {
    audioCtx.suspend();
    this.dataset.power = 'off';
  } else if (this.dataset.power === 'off') {
    audioCtx.resume();
    this.dataset.power = 'on';
  }
  this.setAttribute( "aria-checked", state ? "false" : "true" );
  console.log(audioCtx.state);
}, false);

// Track credit: Outfoxing the Fox by Kevin MacLeod under Creative Commons 

refs

https://www.zhihu.com/question/21087379

https://github.com/videojs/videojs-contrib-hls

https://www.hlsplayer.net/

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---