react中实现将一个视频流为m3u8格式的转换
作者：kurhar
react将一个视频流为m3u8格式的转换
在React中实现M3U8格式的视频流转换需要使用一些库和工具。
一个简单的示例，演示如何将M3U8格式的视频流转换为可播放的URL。
首先：
你需要安装videojs-contrib-hls库，它是一个用于处理M3U8格式的视频流的React组件。
npm install --save video.js videojs-contrib-hls
接下来：
你需要在你的React组件中引入所需的库和样式文件。
import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls/dist/videojs-contrib-hls';
class VideoPlayer extends React.Component {
componentDidMount() {
// 在组件挂载后初始化视频播放器
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('视频播放器已准备好');
});
}
componentWillUnmount() {
// 在组件卸载前销毁视频播放器
if (this.player) {
this.player.dispose();
}
}
render() {
return (
<div>
<div data-vjs-player>
<video ref={(node) => (this.videoNode = node)} className="video-js"></video>
</div>
</div>
);
}
}
export default VideoPlayer;以上是一个简单的视频播放器组件示例。
你可以将其用作React应用中显示M3U8格式视频流的容器。
你可以通过将M3U8地址作为组件的props传递给它来播放视频。
例如：
<VideoPlayer src="https://example.com/video.m3u8" />
react实现网页播放m3u8
m3u8是直播常见的格式，如何在网页上播放它呢？
一、如果是safari，则非常简单
因为safari本身就可以支持这种格式，直接用video标签即可，唯一注意的是type一定要指定成application/x-mpegURL
<video height="100%" width="100%" controls>
<source src={m3u8Url} type="application/x-mpegURL" />
</video>二、如果用chrome，则需要用到video.js包
具体的解决步骤如下：
1、安装video.js相关的包
npm install --save video.js
网上说还要安装videojs-contrib-hls，但似乎没有装它也是可以正常播放的，这个库具体的作用，待研究
2、写一个videoPlayer.js
import React, { Component } from "react";
import Videojs from "video.js";
//import "videojs-contrib-hls";
import "video.js/dist/video-js.css";
class VideoPlayer extends Component {
constructor(props) {
super(props);
}
componentWillUnmount() {
// 销毁播放器
if (this.player) {
this.player.dispose();
}
}
componentDidMount() {
const { height, width, src } = this.props;
this.player = Videojs(
"custom-video",
{
height,
width,
bigPlayButton: true,
textTrackDisplay: false,
errorDisplay: false,
controlBar: true,
type: "application/x-mpegURL",
},
function () {
this.play();
}
);
this.player.src({ src });
}
render() {
return (
<video
id="custom-video"
className="video-js"
controls
preload="auto"
></video>
);
}
}
export default VideoPlayer;
注意：
1）this.player中的id与video标签中的id一定要一致，react就是用这个id进行绑定的；
2）this.player.src({ src });这行一定要放在player的定义的后面，直接放到Vediojs的初始化的src字段中是没用的。
3）className=“video-js” 这个className一定要用video-js，否则视频播放控件就没有样式了
3、在调用页直接引用VedioPlayer
<VideoPlayer src={m3u8url} width="250" />这里的m3u8url如果是从服务端获取的，则一定要保证先获取成功了再加载VideoPlayer，否则m3u8url为空，页面依然是播放不了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。