1，安裝依賴
yarn add video.js
yarn add videojs-flash //新版本的video.js需要單獨安裝videojs-flash
2，封裝Video.js
import React from "react";
import "video.js/dist/video-js.css";
import "videojs-flash";
import videojs from "video.js";
class Video extends React.Component {
state = {
nowPlay: "",
};
//組件掛載完成之后初始化播放控制元件
componentDidMount() {
const videoJsOptions = {
autoplay: true,
controls: true,
sources: [
{
src:this.props.url,
type: "rtmp/flv",
},
],
};
this.player = videojs("my-video"+this.props.index, videoJsOptions, function onPlayerReady() {
//(id或者refs獲取節點，options，回呼函式)
videojs.log("Your player is ready!");
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
this.on("ended", function () {
videojs.log("Awww...over so soon?!");
});
});
}
render() {
return (
<div className="main-wrap">
<video
style={{ width: "220px", height: "120px" }}
id={"my-video"+this.props.index}
className="video-js vjs-default-skin"
></video>
</div>
);
}
}
export default Videos;
3，使用
import Video from '../components/video/Video';
this.state = {
videoDevices:[
{
playRtmp:"rtmp://58.200.131.2:1935/livetv/hunantv",
name:"湖南衛視"
},
{
playRtmp:"rtmp://202.69.69.180:443/webcast/bshdlive-pc",
name:"香港財經"
}
]//視頻
};
{
this.state.videoDevices.map((item, index) =>
<li key={index}>
<p>{item.name}</p>
<Video index={index} url={item.playRtmp} />
</li>
)
}
詳細配置：video.js、videojs-flash
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/171771.html
標籤：其他
上一篇：【MMD】MikuMikuDance入門&必備網址整理
下一篇：JAVA之forEach遍歷集合