Question

我对将HLS播放器与react集成在一起的概念很陌生。从研究和在线文章中，我了解到HLS在React中的基本实现。他们在基本水平上已经足够好。我有一个hls URL，它是解密形式的，并具有与之关联的令牌。我需要解密该URL并将其传递以与hls播放器模块一起播放。

这就是我的示例网址的样子：

https://learnmedia-inwe.streaming.media.azure.net/5bac2481-d872-3708-a4b3-25b8819e627a/sample-mp4-file.ism/manifest(format=m3u8-aapl,encryption=cbc).m3u8

关联的令牌：“承载者eyJhbGciOiJ .......... pXVCJ9.ey .......”。

我使用HLS.js包来实现视频流传输，到目前为止，这是实现的目标：

Player.js

import React,{Component} from 'react'
import './responsive.css'
import styled from 'styled-components'
import Hls from 'hls.js'

const PlayerWrapper = styled.div `
    position : relative
`
const PlayerInner = styled.div `
`

class Player extends Component{
    constructor(props){
        super(props);
        this._onTouchInsidePlayer = this._onTouchInsidePlayer.bind(this);
    }
    componentDidMount(){
        if (Hls.isSupported() && this.player) {
            const videoSrc = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
            const video = this.player;

            video.addEventListener('contextmenu',(e) =>{
                e.preventDefault();
                return false;
            })

            const hls = new Hls();
            hls.loadSource(videoSrc);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
            });
        }
    }
    _onTouchInsidePlayer(){
        if(this.player.paused){
            this.player.play();
        }else{
            this.player.pause();
        }
    }
    render(){

        const style = {
            width:640,
            height:360,
            background:'#000',
        }
        return(
            <PlayerWrapper>
                <PlayerInner>
                    <video controls={true} onClick={this._onTouchInsidePlayer} style={style} ref={(player) => this.player = player} autoPlay={true}/>
                </PlayerInner>
            </PlayerWrapper>
        )
    }
}

export default Player

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components'
import Player from './component/videoPlayer'

const AppWrapper = styled.div ``;
const LiveVideo = styled.div `
  max-width : 640px;
  max-height : 480px;
  margin : 0 auto;
`;

class App extends Component{
  render(){
    return(
      <AppWrapper className="app">
          <LiveVideo>
            <Player/>
          </LiveVideo>
      </AppWrapper>
    )
  }
}

export default App;

此设置适用于正常的URL，例如上面的代码中的URL，但不适用于像我这样的加密URL。我不确定要实现相同的加密技术。可用的SO资源对于此特定用例并没有太多帮助或描述。

感谢任何帮助使带有令牌的加密URL与HLS播放器一起起作用的反应。

谢谢。

使用react播放HLS加密视频

0 个答案: