我对将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播放器一起起作用的反应。
谢谢。