使用react-player播放m3u8(hls)视频时遇到的问题

  • 问题一 :视频跨域
    这个应该是比较常见的
    解决办法就是使用代理,
    在react项目中的 package.json文件中,加一个

    //目标主机地址
    "proxy": "http://xx.xx.xx.xx/"

    位置无所谓,跟name和dependencies这些属性值同级就行

  • 问题二:获取本地json文件时,封装了axios一个公共方法,结果发现返回值获取不到

    描述:axios这个插件使用时,如果在组件内部使用完全没有问题,但是如果在外部调用axios进行请求数据,就不能按照js函数的返回方式获取返回值。因为通过这种方式返回的是一个promise值,不能直接获取返回数据

解决办法:

//在成功返回数据的.then方法内回调一个函数,在函数内部获取真正的返回数据
global.ajax(option,
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Player是一种流行的React库,它允许我们在React项目中轻松地集成和管理媒体文件的播放。虽然React Player本身并不直接支持m3u8格式的视频播放,但我们可以通过使用其他库或添加一些额外的功能来实现播放m3u8文件。 要在React Player中播放m3u8文件,我们可以使用Hls.js这个第三方库。Hls.js是一个JavaScript库,它提供了对HLS(HTTP Live Streaming)协议的支持,这是一种用于流媒体的协议。 首先,我们需要将Hls.js库导入到我们的React项目中。我们可以通过npm或yarn安装该库。然后我们需要在我们的React Player组件中引入Hls.js库,并创建一个新的Hls对象。 在React Player组件的播放器属性中,我们可以指定要播放视频文件的URL。对于m3u8文件,我们可以将URL指定为m3u8文件的路径。 接下来,我们需要在React Player组件的componentDidMount生命周期方法中初始化Hls对象,并指定播放器的ref属性来设置播放器的实例。然后,我们可以通过调用Hls对象的loadSource方法来加载m3u8文件的URL,并通过调用Hls对象的attachMedia方法将视频流附加到播放器实例上。 最后,我们可以通过调用Hls对象的on方法来监听不同的事件,例如视频加载完成、播放错误等。我们可以在这些事件的处理函数中执行适当的操作。 总的来说,通过集成Hls.js库和React Player组件,我们可以轻松地在React项目中播放m3u8文件。这种方法使得我们可以简单地处理和控制视频播放,以提供良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值