LivePlayer H5播放器、在react中使用

最新推荐文章于 2023-12-05 10:19:02 发布

森林的尽头是阳光

最新推荐文章于 2023-12-05 10:19:02 发布

阅读量2.5k

点赞数 4

分类专栏： h5视频播放器文章标签： h5播放器

本文链接：https://blog.youkuaiyun.com/sinat_41904410/article/details/108214114

版权

h5视频播放器专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在React项目中集成LiveQing官方直播播放器，支持多种格式包括MP4、m3u8/HLS、HTTP-FLV/WS-FLV及RTMP。通过npm安装或官网下载，可在项目public文件夹下引入并配置，实现流畅模式、直播标识等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LiveQing官方网址：
https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property

特点：

支持MP4播放
支持m3u8/HLS播放;
支持HTTP-FLV/WS-FLV播放;
支持RTMP播放;

安装, 可安装也可以官网下载压缩包直接使用

npm install @liveqing/liveplayer

在react中使用

1、下载包，解压后如图所示部分放入项目public文件夹下
在这里插入图片描述

在这里插入图片描述

2、在入口html中引入，( public / index.html )

<script src="./liveqing/liveplayer-element.min.js"></script>

3、组件中使用（更多属性、方法请看官网）

import React from 'react';
import styles from './xxx.scss';
class VideoBox extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div className={styles.videoBoxStyle}>
                <live-player 
                    video-url={this.props.videoUrl}  // 视频url
                    fluent = 'true' // 流畅模式
                    live={true} // 是否直播, 标识要不要显示进度条
                    stretch='true' // 是否拉伸
                    controls={true}> // 显示播放器控制栏
                 </live-player>
            </div>
        )
    }
}
export default VideoBox;