uni-app live-player标签黑屏

uni-app live-player标签黑屏

项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows 10
HBuilderX类型 正式
HBuilderX版本号 4.08
第三方开发者工具版本号 1.06.2402040
基础库版本号 2.30.0
项目创建方式 HBuilderX

示例代码：

<template>  
<view>  
<view id="video-box">  
<live-player  
id="pusher"  
src="pushUrl"
    autoplay
    @statechange="statechange"
    @error="error"
    style="width: 300px; height: 225px"
  />
</view>
</view>
</template>  

<script>
export default {
data() {
return {
liveAppID: 1306078402,
pushUrl:
"rtmp://199195.push.tlivecloud.com/live/20240507001?txSecret=c3657e2f3dc238b280b53e94aa77f5fb&amp;txTime=663B315C",
//   mode: "live",
};
},
onShow() {},
onLoad() {  
},
methods: {
statechange(e) {
console.log("live-player code:", e.detail.code);
},
error(e) {
console.error("live-player error:", e.detail.errMsg);
},
},
};
</script>  

<style scoped lang='scss'>
</style>

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

uniapp编译到小程序使用live-player标签是黑屏的，运行到真机也是黑屏也不报错，请问如何解决，打算做直播相关功能。


更多关于uni-app live-player标签黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app live-player标签黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 live-player 组件时，如果出现黑屏的情况，可能是由于多种原因导致的。以下是一些常见的原因及解决方法：

1. 检查 src 属性

live-player 组件的 src 属性必须是一个有效的直播流地址。确保你提供的直播流地址是正确的，并且能够正常播放。

<live-player src="https://example.com/live/stream.m3u8" autoplay></live-player>

2. 检查网络连接

确保设备有正常的网络连接，并且能够访问直播流地址。如果网络连接不稳定或无法访问直播流地址，可能会导致黑屏。

3. 检查权限

在某些平台（如微信小程序）上，使用 live-player 组件需要特定的权限配置。确保你已经在小程序的 app.json 中正确配置了 live-player 的权限。

{
  "requiredBackgroundModes": ["live"]
}

4. 检查 autoplay 属性

如果 autoplay 属性没有设置为 true，直播流可能不会自动播放，导致黑屏。

<live-player src="https://example.com/live/stream.m3u8" autoplay></live-player>

5. 检查跨域问题

如果直播流地址涉及到跨域问题，可能会导致黑屏。确保直播流服务器已经正确配置了跨域访问权限。

6. 检查平台兼容性

live-player 组件在不同的平台上可能有不同的表现。确保你使用的平台支持 live-player 组件，并且已经正确配置了相关参数。

7. 检查视频格式

确保直播流的视频格式是 live-player 组件支持的格式。常见的直播流格式包括 HLS (m3u8) 和 FLV。

8. 查看控制台日志

在开发工具中查看控制台日志，看看是否有错误信息。日志可能会提供关于黑屏原因的线索。

9. 更新 uni-app 版本

确保你使用的是最新版本的 uni-app，旧版本可能存在一些已知的 bug。

10. 检查设备硬件

在某些情况下，设备的硬件问题（如 GPU 问题）也可能导致黑屏。尝试在其他设备上运行，看看问题是否依然存在。

11. 检查 live-player 组件的样式

确保 live-player 组件的样式没有设置 display: none; 或 visibility: hidden;，否则可能会导致黑屏。

12. 检查 live-player 组件的宽高

确保 live-player 组件的宽高设置正确，否则可能会导致黑屏。

<live-player src="https://example.com/live/stream.m3u8" autoplay style="width: 100%; height: 300px;"></live-player>

13. 使用 debug 模式

在 live-player 组件中启用 debug 模式，查看是否有更多的调试信息输出。

<live-player src="https://example.com/live/stream.m3u8" autoplay debug></live-player>
回到顶部