uniapp引入vue-flv-player导致app白屏报错

最新推荐文章于 2024-07-17 14:46:12 发布
最新推荐文章于 2024-07-17 14:46:12 发布
阅读量959 收藏 1
点赞数
文章标签： vue.js uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45059824/article/details/126831435
版权

由于uniappH5端的video组件不能加载flv格式的视频，故使用vue-flv-player播放

但这会导致app报错

 如上图所示

错误原因为：引入的插件使用了uniapp中没有的“Promise”，所以才会出现运行到手机时白屏的问题

（这里的“Promise”有很多其他类似的内容，例如：“Element”，“getElementById”，这里是因为uniapp中无法操作DOM）

解决方法：在main.js中引入插件时使用条件编译即可解决，如下图所示

 

小怪兽RUA
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp - 视频播放器插件，支持播放m3u8 / flv / mp4视频流等各种格式的视频文件，附带全屏播放、播放快进、循环播放、音量调节、视频解码等功能（详细示例代码，一键复制开箱即用！）
高级前端工程师
08-02 7806
uniapp小程序h5网页app安卓苹果平台视频播放器，uniapp中如何使用视频播放器组件,uniapp使用mui-player插件详细教程，uniapp微信小程序接入视频播放器功能插件，uniapp播放m3u8 / flv / mp4视频流，uniapp怎么播放m3u8格式的视频，uniapp如何播放flv视频流文件，uniapp怎么播放m3u8 / flv视频流文件，uniapp m3u8格式视频，uniapp 使用 mui-player 插件播放 m3u8/flv 视频流，uniapp网页h5端播放
uni-app开发时报错误 Vue warn Unknown custom element page head
Yfw的博客
08-28 3022
对比hello-uniapp项目的main.js，我们可以看到page-head和page-foot要注册（看下图）： uni-app组件与样式相关文件导入： 样式导入：
uniapp 开屏视频 以及解决开屏视频播放前短暂白屏或黑屏的情况
weixin_45563734的博客
07-12 604
uniapp 开屏视频 以及解决开屏视频播放前短暂白屏或黑屏的情况
uniapp app端播放实时监控视频 使用DPlayer.js flv.js
m0_55881852的博客
08-20 3771
uniapp app端播放实时监控视频 使用DPlayer.js flv.js
uniapp 使用 mui-player 插件播放 m3u8/flv 视频流
一步一个脚印，踏实努力，向着目标前进
08-23 5881
请注意，以上方法中的视频流地址需要确保有效性和可访问性，并根据需要进行样式和功能的自定义。另外，uni-mpvue-player和uni-video插件的具体使用方法和配置请参考插件的文档，原生小程序组件的使用方法请参考小程序开发文档。以上步骤将在UniApp中使用mui-player插件播放M3U8/FLV视频流。请注意，确保视频流地址的有效性和可访问性，以及根据需要进行样式和功能的自定义。除了使用mui-player插件外，UniApp中还可以使用其他播放器插件或原生组件来播放视频流。
uniapp在app端白屏报错
MAYA_G的博客
04-02 6387
问题： H5端没有问题，app端白屏（除了原生tabbar之外其他地方一片空白），控制台输出如下的报错，一脸懵逼…… [ERROR] reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceConte...
uni-preset-vue-master uniapp项目模板
12-02
《uni-preset-vue-master：基于uni-app的高效开发模板详解》 在移动应用开发领域，uni-app作为一款跨平台的开发框架，以其强大的兼容性和灵活性受到广泛关注。uni-preset-vue-master则是一个专为uni-app量身定制的...
uniapp中的一个完全相似Vue-router的路由插件
01-20
而 uni-simple-router 是一个专为 uni-app 设计的轻量级路由插件，它的设计思想与 Vue-router 非常相似，旨在简化 uni-app 中的路由配置。 ### 1. 安装和引入 uni-simple-router uni-simple-router 的安装有三种...
vue使用video插件vue-video-player的示例
10-14
Vue-video-player 是一个基于 Vue.js 的视频播放插件，它利用 video.js 库提供了丰富的自定义选项和主题，使得在 Vue 项目中实现视频播放变得简单。下面将详细介绍如何在 Vue 项目中使用 vue-video-player 插件。 ...
uniapp框架-ChatRobot聊天机器人-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
vue-video-player.zip
09-09
Vue-video-player是一个基于video.js的前端视频播放组件，专为Vue.js框架设计。这个组件将video.js的强大功能与Vue的灵活性相结合，使得在Vue项目中处理视频内容变得更加简单。Video.js是一个广泛使用的开源HTML5和...
uniapp nvue、vue的webview实现播放视频全屏
Miyin的博客
01-01 3390
uniapp nvue、vue的webview实现播放视频全屏，uniapp的原生视频组件性能太低，比h5还弱，只能使用webview组件调用h5播放器播放视频，相信很多朋友都会遇到webview组件视频不能全屏播放，点击全屏无响应等情况。 下面是vue页面实例： onReady() { // vue页面设置webview宽高 // #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview
uniapp，video视频播放不了，页面显示不完整
weixin_46715876的博客
10-12 5237
video播放不了，为界面全黑，此时切换为浏览器运行即可播放 视频播放时显示不完整，在App.vue中添加以下代码可解决 html,body{ height: 100%; width: 100%; } page { height: 100%; } 是uni-page-body没有设置height:100% ...
uniapp(微信小程序)播放flv视频(萤石云视频)解决方案(使用web-view组件完美适配)
最新发布
qq_63189148的博客
07-17 743
现在我们的项目需要能够在微信小程序中播放萤石云摄像头的直播以及录播视频，但是官方提供的组件要么就是原生的微信小程序，uniapp无法直接使用，要么就是提供的uniapp方案只能h5页面下使用，而且要引入一堆文件才行，还有的方案就是使用萤石云的自定义组件，但是无法按照我们自己的需求来设置页面了，因此我们准备将所有视频链接转换成flv视频流（调用萤石云api，自行上官方文档查看），只要能够在微信小程序中播放flv视频，就能完成我们的需求。在尝试了多种方法之后，我整出了一个能够完美适配微信小程序页面的播放方法。
uni-app + mui-player & vue + mui-player 播放flv文件
Huang_John的博客
10-08 1227
其它都差不多，直接上代码。
uni-app 和H5页面视频播放flv格式视频监控
wangxiaosheng11的博客
08-30 5192
uni-app 和H5页面视频播放flv格式视频监控
UNI-APP引入jsencrypt加密白屏解决方案
qq_29933557的博客
04-02 1141
UNI-APP引入jsencrypt加密白屏解决方案
基于uni-app开发的一款视频播放器插件
热门推荐
洋洋的博客
10-13 2万+
yy-video-player 基于uni-app开发的一款视频播放器插件，开箱即用，具有视频下载，页面返回，弹幕，进度条等功能。 使用截图 非全屏待播放 全屏播放 使用教程 导入插件 import yyVideoPlayer from '@/components/yy-video-player.nvue'; 声明插件 components: { yyVideoPlaye...
uni - app 视频组件 viedeo
qq_25906119的博客
01-31 646
uni - app video视频组件的使用
uniapp使用vue-awesome-swiper
04-13
要在UniApp中使用vue-awesome-swiper，首先需要安装它。可以通过npm或者yarn进行安装，命令如下： ``` npm install vue-awesome-swiper --save ``` 安装完成后，在需要使用的页面中引入vue-awesome-swiper组件，并...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值