企业网站首页设计与制作网站推广软文
🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~
💟 作 者：码喽的自我修养🥰
📝 专 栏：uniApp与微信小程序 🎉🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕
🌈🌈文章目录
开发背景
开发准备
基础代码
monitor.vue
xgplayer.vue
完成效果图
相关文档
开发背景
最近有个需求，需要在app中展示对应站房的实时监控画面，因为uniapp原有的video组件功能比较少就考虑到引入西瓜播放器的视频组件
西瓜播放器 | 快速上手
https://v2.h5player.bytedance.com/gettingStarted/
开发准备
因为是直播流就选择了flvjs, 项目安装xgplayer-flv
npm install xgplayer-flv
通过render.js去做视图层，要注意的是nvue无法使用renderjs
详细文档可以自己去uniapp官网查看用法 renderjs | uni-app官网uni-app,uniCloud,serverless,renderjs,使用方式,示例,功能详解,注意事项https://uniapp.dcloud.net.cn/tutorial/renderjs.html
renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。
renderjs的主要作用有2个：
1. 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2. 在视图层操作dom，运行 for web 的 js库
基础代码
monitor.vue
<!-- monitor.vue -->
<template><view class="uni-padding-wrap monitor_box list_box"><uni-row style="background-color: #fff;" class="list_video_box"><uni-col :span="8" class="list_video_item" v-for="(item,i) in videoLlist" :key="i"><xgplayer :id='`myVideo${i}`' :videoData="item"></xgplayer><text class="text">{{item.mpName}}</text></uni-col></uni-row></view>
</template>
<script>import xgplayer from './xgplayer.vue'export default {components: { xgplayer },data(){return {videoList: [], // 视频列表}}}
</script>
xgplayer.vue
<template><view class="media-box" style="width: 264px;height: 160px;" :start='startUrl' :change:start="xgplayer.startPlay" ><view :id="id" :detail="videoData" :change:detail="xgplayer.initJs"></view></view>
</template><script>// 逻辑层export default {props: ['id', 'videoData'],data(){return {startUrl:1}},methods: {onPlay(){console.log('响应视图层方法')}}}
</script><script module="xgplayer" lang="renderjs">// 视图层import FlvPlayer from 'xgplayer-flv';export default{data(){return {xgPlayer: null}},mounted(){},onunload() {this.xgPlayer.destroy()},methods:{initJs(newVal,old,ownerInstance,instance){if (typeof window.Player === 'function') {this.initPlayer(newVal)} else {// 动态引入较大类库避免影响页面展示const script = document.createElement('script')// view 层的页面运行在根目录script.src = 'static/xgplayer.js'document.head.appendChild(script)script.onload = this.initPlayer.bind(this,newVal,ownerInstance)}},initPlayer(detail,ownerInstance){const _this = this_this.xgPlayer = new FlvPlayer({id: 'myVideo' + detail.index, // 容器IDposter: 'https://xxx/xxx.png', // 封面图不支持本地资源isLive: true, // 是否直播url: detail.videourl + '?url=' + detail.SteamName, // 直播流地址autoplay: false, // 是否自动播放height: 160,width: 264,// 播放错误后的站位图errorTips: `<image src='http://xxx/xxx.png' id='videoErr${detail.index}' style='width: 50%;'><image>`,// 截图screenShot: {saveImg: true,quality: 0.92,type: 'image/png',format: '.png'},ignores: ['time', 'progress', 'replay', 'volume'], // 关闭内置控件closeInactive: true, // 播放器控制栏常驻不隐藏closeVideoClick: true, // video触发click事件后视频切换播放/暂停状态})_this.xgPlayer.once('play',()=>{console.log('播放成功')// 调用逻辑层方法ownerInstance.callMethod('onPlay')})_this.xgPlayer.on('error',(err)=>{console.log('播放出错', err)let videoErr = document.getElementById(`videoErr${detail.index}`)// 重新播放videoErr.onclick = function () {_this.xgPlayer.destroy()_this.initPlayer(detail,ownerInstance)}})_this.xgPlayer.on('screenShot',(DOMString)=>{console.log(DOMString);_this.saveScreenshot(new Date().getTime(), DOMString, 100)})},saveScreenshot(fileName, base64, quality) { // fileName:自定义文件名 ，base64：图片base64码, quality: 图片质量1-100const bitmap = new plus.nativeObj.Bitmap()// 从本地加载Bitmap图片bitmap.loadBase64Data(base64, () => {bitmap.save("_doc/" + fileName + ".jpg", {overwrite: true,quality: quality}, (i) => {// callback(i);console.log("保存图片成功：" + JSON.stringify(i))this.capture(i.target)}, (e) => {console.log("保存图片失败：" + JSON.stringify(e))})}, (e) => {console.log("加载图片失败：" + JSON.stringify(e))})},// 保存视频截图到相册capture(file) {plus.gallery.save(file, () => {console.log("图片已保存到相册")}, (e) => {if (e.code === -3310 || e.code === 8) {console.log("您已禁止访问相册,请设置开启权限")} else {console.log("图片保存失败:" + JSON.stringify(e))}})},// 逻辑层触发视图层函数startPlay(){this.xgPlayer.play()},}}
</script>
完成效果图
相关文档
uniapp官网组件
https://uniapp.dcloud.net.cn/componenthttps://uniapp.dcloud.net.cn/component/
西瓜播放器配置项 西瓜播放器 | 配置https://v2.h5player.bytedance.com/config/#%E5%BF%85%E9%80%89%E9%85%8D%E7%BD%AE
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注 ~💕
更多专栏订阅推荐：
🥕 JavaScript深入研究
👍 前端工程搭建
💕 vue从基础到起飞✈️ HTML5与CSS3
🖼️ JavaScript基础
⭐️ uniapp与微信小程序
📝 前端工作常见问题与避坑指南
✍️ GIS地图与大数据可视化
📚 常用组件库与实用工具
💡 java入门到实战
