前端专家教你如何获取网页播放器流地址：3种方法详解

本文将介绍3种方法来获取网页播放器中的流地址（m3u8、hls等），方便你对网页视频或音频流进行分析或其他处理。

方法一：使用正则表达式匹配

步骤：

获取所有的媒体元素
遍历所有的媒体元素，获取其src属性值
使用正则表达式匹配出其中的流地址（m3u8、hls等等）
打印出匹配到的流地址

代码：

// 获取所有的媒体元素
const mediaElements = document.querySelectorAll('video, audio');

// 遍历所有的媒体元素
mediaElements.forEach(mediaElement => {
  // 获取媒体元素的src属性值
  const src = mediaElement.src;
  
  // 使用正则表达式匹配出其中的流地址（m3u8、hls等等）
  const regex = /(https?:\/\/[^\s]+)/g;
  const matches = src.match(regex);
  
  // 打印出匹配到的流地址
  if (matches) {
    matches.forEach(match => {
      console.log(match);
    });
  }
});

方法二：使用媒体元素的canPlayType方法判断

步骤：

获取所有的媒体元素
遍历所有的媒体元素，获取其src属性值
使用媒体元素的canPlayType方法判断是否支持该媒体类型
如果支持，则打印出该媒体元素的src属性值

代码：

// 获取所有的媒体元素
const mediaElements = document.querySelectorAll('video, audio');

// 遍历所有的媒体元素
mediaElements.forEach(mediaElement => {
  // 获取媒体元素的src属性值
  const src = mediaElement.src;
  
  // 使用媒体元素的canPlayType方法判断是否支持该媒体类型
  const canPlay = mediaElement.canPlayType('application/vnd.apple.mpegurl') === 'maybe' ||
                  mediaElement.canPlayType('application/x-mpegURL') === 'maybe' ||
                  mediaElement.canPlayType('application/vnd.ms-sstr+xml') === 'maybe' ||
                  mediaElement.canPlayType('application/x-mms-framed') === 'maybe';
  
  // 如果支持，则打印出该媒体元素的src属性值
  if (canPlay) {
    console.log(src);
  }
});

方法三：使用第三方库如videojs

步骤：

引入videojs库
初始化videojs，并设置监听器
在监听器中获取播放器的源码，解析其中的流地址并打印出来

代码：

// 引入videojs库
import videojs from 'video.js';

// 初始化videojs，并设置监听器
const player = videojs('my-player', {}, function() {
  const tech = this.tech();
  tech.on('sourceopen', function() {
    // 获取播放器的源码
    const sourceBuffer = tech.sourceBuffer;
    if (sourceBuffer) {
      sourceBuffer.addEventListener('updateend', function() {
        const sourceBufferData = sourceBuffer.buffered;
        for (let i = 0; i < sourceBufferData.length; i++) {
          const rangeStart = sourceBufferData.start(i);
          const rangeEnd = sourceBufferData.end(i);
          const rangeLength = rangeEnd - rangeStart;
          const mpegUrlBuffer = sourceBuffer.buffered.slice(rangeStart, rangeEnd);
          const reader = new FileReader();
          reader.readAsArrayBuffer(mpegUrlBuffer);
          reader.onloadend = function() {
            const bytes = new Uint8Array(reader.result);
            const mpegUrl = String.fromCharCode(...bytes);
            const regex = /(https?:\/\/[^\s]+)/g;
            const matches = mpegUrl.match(regex);
            if (matches) {
              matches.forEach(match => {
                console.log(match);
              });
            }
          }
        }
      });
    }
  });
});

注意：

以上代码仅供参考，具体实现可能需要根据实际情况进行调整。
使用第三方库videojs需要引入相应的库文件。
获取流地址后，请注意相关版权和法律问题。

希望本文能帮助你更好地理解如何获取网页播放器中的流地址。