uni-app 视频播放遇到的问题-video

最近开发一个项目，一个视频列表，点击其中一个视频，全屏播放（像大屏预览似的全屏），图上覆盖截图，全屏和回放图标。

本文涉及到的知识点：

1。视频播放video组件使用；

2。图片下载uni.downloadFile；

3。上拉加载，下拉刷新

4。subNVue；

5。父子组件传值

弹出的全屏窗口：

videoTest.vue

<template><view style="height: 100%;"><videoView :srcPath="src" :picPath="picPath"></videoView></view>
</template><script>import videoView from './video.nvue'export default {components:{videoView,},data() {return {picPath:'',src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',}},onLoad(params) {this.src = params.path;this.picPath = params.picPath;},methods:{goBack() {uni.navigateBack();//跳转到上一个页面},}}
</script><style></style>

video.nvue

<template><view class="video_bg" @click="goBack"><video id="myVideo" :src="srcPath" class="video_width"@error="videoErrorCallback" controls="true"autoplay="true" direction="90" objectFit="fill" @play="beginPlay" @fullscreenchange="changeFull"enable-play-gesture="true" :show-center-play-btn="true":poster="picPath" @click=""><cover-image src="../../static/images/check/icon_full.png" class="cover_img_common right_20" @click="fullScreen()"></cover-image><cover-image src="../../static/images/check/icon_crop.png" class="cover_img_common right_65"></cover-image></video></view>
</template><script>export default {data() {return {videoContext:null,}},mounted() {this.videoContext = uni.createVideoContext('myVideo');},props:{srcPath:String,picPath:String},methods:{//返回上一页前先结束播放，并将屏幕方向还是设为默认goBack() {this.videoContext.stop();uni.navigateBack();plus.screen.lockOrientation('default'); },videoErrorCallback: function(e) {uni.showModal({content: e.target.errMsg,showCancel: false})},//监听播放状态beginPlay(params) {console.log('playStatus',params);this.playStatus = 1;},//只有视频开始播放后，全屏按钮可用fullScreen(item) {if(this.playStatus == 1) {this.videoContext.requestFullScreen();}},changeFull(params) {console.log('changeFull',params);if(params.detail.fullScreen) {//不能动态设置进度条的显示// this.videoContext.controls = true;} else {plus.screen.lockOrientation('portrait-primary'); }//屏幕方向数值： 0 - 竖屏； 90 - 横屏，HOME键在右； 180 - 反向竖屏； -90 - 反向横屏，HOME'键在左//  let orit = plus.navigator.getOrientation();//  if((orit==0)||(orit==180)){// //竖屏做的操作//  }else{// //横屏做的操作//  }}}}
</script><style>page{height: 100%;}.video_width {width: 100%;/* z-index: 100; */}.cover_img_common {width: 25px; height: 25px;float: right;position: absolute;bottom: 15px;}.right_20 {right: 20px;}.right_65 {right: 65px;}.right_110 {right: 110px;}.video_bg {height:100%;display: flex;justify-content: center;align-items: center;}
</style>

横竖屏方向：

“orientation” : [//竖屏正方向“portrait-primary”,//竖屏反方向“portrait-secondary”,//横屏正方向“landscape-primary”,//横屏反方向“landscape-secondary”,//自然方向“default”
]

视频列表页：

列表中做了两种处理：

1。有视频时显示视频，并显示封面，但点击视频时，并不触发播放，是弹出全屏页面，在全屏页面进行全屏，截图等操作；这种处理需要用subNVue特殊处理一下弹出框，要不然弹出框会被视频遮挡。

2。另一种处理是不管有没有视频，都显示图片，有视频的图片给它显示播放按钮和截屏按钮，但点击图片时，仍然会弹出全屏页面。被注释掉的代码就是只显示图片的处理。

<template><view><uni-nav-bar title="远程巡店" backgroundColor="#074498" color="white" fixed="true"statusBar='true' @clickRight="searchPerson"><view slot="right" class="flex_vcenter"><image src="../../static/images/workbeach/icon_search.png" class="imgSize"></image></view></uni-nav-bar><uni-list :border="false"><UniListItemCustomer v-for="(item,index) in deviceList" :key="index"  :border="false" direction="column" class="item" clickable @click="gotoDetail(item.deviceId)"><template v-slot:header><view><!-- <view v-if="item.realTimeResults" style="display: flex;align-items: center;justify-content: center;"><image ref='img' :src="item.realTimeResults[2].picUrl" class="video_width"@error="handleImageError1" @click="fullPlay(item)"></image><image src="../../static/images/check/icon_play.png" class="play_icon"></image><image src="../../static/images/check/icon_full.png" class="cover_img_common right_20" @click="fullScreen(item)"></image><image src="../../static/images/check/icon_crop.png" class="cover_img_common right_65" @click="cropPic(item.deviceId)"></image></view> --><video id="myVideo" :src="item.realTimeResults[2].hls" class="video_width"@error="videoErrorCallback" controls="false" v-if="item.realTimeResults"autoplay="false" direction="90" objectFit="fill" @play="beginPlay" @fullscreenchange="changeFull"enable-play-gesture="true":poster="item.realTimeResults[2].picUrl"><cover-image @click="fullPlay(item)"></cover-image><cover-image src="../../static/images/check/icon_full.png" class="cover_img_common right_20" @click="fullScreen(item)"></cover-image><cover-image src="../../static/images/check/icon_crop.png" class="cover_img_common right_65" @click="cropPic(item.deviceId)"></cover-image></video><image src="../../static/images/icon_check_default.png" class="check_img" @error="handleImageError" v-else></image></view></template></UniListItemCustomer></uni-list><uni-load-more :status="more" :contentText="contentText" @clickLoadMore="more=='error'?getPersonelList():''"></uni-load-more></view>
</template><script>import ApiService from './service.js'import Tips from '../../utils/tips.js'import UniListItemCustomer from '../../components/uni-list-item/uni-list-item-customer.vue'export default {components:{UniListItemCustomer},data() {return {deviceList:[],searchCondition:{},more:'more',pageNum:1,pageSize:10,contentText: {contentdown: '上拉加载更多',contentrefresh: '正在加载中',contentnomore: '没有更多数据了',contenterror: '数据异常，请点击此处重新加载'},reLoad:false,videoContext:null,playStatus:0,}},created() {this.getVideoInfoList();console.log('created');},mounted() {console.log('mounted');},onReady() {this.videoContext = uni.createVideoContext('myVideo')},onLoad() {uni.$on('receiveData',(options)=>{console.log('onLoad====receiveData',JSON.stringify(options));this.searchCondition = options;this.reLoad = true;this.pageNum = 1;this.getVideoInfoList();})},onReachBottom() {console.log('onReachBottom');if(this.more != 'noMore') {this.more = 'more';this.getVideoInfoList();}},onPullDownRefresh() {console.log('onPullDownRefresh');this.reLoad = true;this.pageNum = 1;this.getVideoInfoList();},methods:{goBack() {uni.navigateBack();//跳转到上一个页面},searchPerson() {const subNvue = uni.getSubNVueById('netDialog');subNvue.show();},async getVideoInfoList() {this.searchCondition['pageSize'] = this.pageSize;this.searchCondition['pageNum'] = this.pageNum;this.more = 'loading';let res = await ApiService.getVideoInfoList(this.searchCondition);// console.log('getPersonelList',JSON.stringify(res));if(res.success) {if(res.data.code == 200) {this.deviceList = this.reLoad?res.data.data.rows:this.deviceList.concat(res.data.data.rows);if(this.deviceList.length != res.data.data.total) {this.pageNum += 1;this.more = 'more';} else {this.more = 'noMore';}} else {if(this.pageNum == 1) {this.deviceList = [];}Tips.toast(res.data.msg);this.more = 'error';}} else {Tips.toast(res.message);this.more = 'error';}if(this.reLoad) {uni.stopPullDownRefresh();this.reLoad = false;}},gotoDetail(item) {console.log(item)uni.navigateTo({url: 'personnelDetail?item='+JSON.stringify(item)})},videoErrorCallback: function(e) {uni.showModal({content: e.target.errMsg,showCancel: false})},handleImageError1(props) {console.log('handleImageError',props);this.$refs.img.src = '../../static/images/icon_check_default.png'},handleImageError(props) {console.log('handleImageError',props);this.picPath = '../../static/images/icon_check_default.png'},beginPlay(params) {console.log('playStatus',params);this.playStatus = 1;},async cropPic(deviceId) {let res = await ApiService.getSnapshot({"deviceId":deviceId});console.log('cropPic',res);if(res.success) {if(res.data.code == 200) {let picPath = res.data.data.url;console.log('cropPic picPath=',picPath);//下载截图uni.downloadFile({url:picPath,success: (res) => {console.log('下载成功',res);if(res.statusCode === 200) {console.log('下载成功');Tips.toast('下载成功');}},fail: (error) => {console.log('下载失败',error);Tips.toast('下载失败');}})} else {Tips.toast(res.data.msg);}} else {Tips.toast(res.message);}},fullScreen(item) {if(this.playStatus == 1) {this.videoContext.requestFullScreen();}},changeFull(params) {console.log('changeFull',params);if(params.detail.fullScreen == true) {this.videoContext.controls = true;}},fullPlay(item) {console.log('3333');uni.navigateTo({url:'./videoTest?path='+item.realTimeResults[2].hls+'&picPath='+item.realTimeResults[2].picUrl})}}}
</script><style lang="scss" scoped>@import '../../styles/base.scss';page {background: #f9f9f9;overflow-x: hidden;padding: 0;}.nav-style {font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';height: 45px;}.status_style {float: right;position: absolute;right: 35px;font-size: 16px;font-family: 'PingFangSC-Regular', 'PingFang SC';}.common_color {color:#074498}.title_size {font-size: 16px;}.status_color_use {color: #73B703;}.status_color_forbidden {color: #D9001B;}.item_text {/* padding-top: 8px; */font-family: 'PingFangSC-Regular', 'PingFang SC';color: #333333;font-size: 14px;line-height: 25px;}.arrow_right {width: 20px;height: 25px;float: right;right: 20px;position: absolute;}.item_content {padding: 10px 0px 0px 0px; display: flex;flex-direction: column;}.divider {height: 0.5px;width: 100%; background-color: #dbdbdb;margin-top: 10px;}.flex_vcenter {display: flex; align-items: center;}.item {border-bottom: #f9f9f9 8px solid;/* padding: 0px 15px 0px 15px; */}.video_width {width: 100%;z-index: 100;background-image: url(../../static/images/icon_check_default.png);background-size: 100% 100%;opacity: 0.5;}.cover_img_common {width: 25px; height: 25px;float: right;position: absolute;bottom: 15px;}.play_icon {position: absolute;width: 60px; height: 60px;}.right_20 {right: 20px;}.right_65 {right: 65px;}.right_110 {right: 110px;}.imgSize {width: 25px; height: 25px;}.check_img {width: 100%;opacity: 0.5;}
</style>

video层级过高，导致弹窗显示在底层，解决方法：

{"path": "pages/netcheck/NetCheckList","style": {"navigationBarTitleText": "远程巡店","enablePullDownRefresh":true,//下拉刷新配置"app-plus": {"pullToRefresh": {"style":"circle","offset": "88px"},"subNVues":[{  "id": "netDialog", // 唯一标识  "path": "pages/netcheck/subNVue/DialogNet", // 页面路径  "type": "popup",  //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏"style": {  "position":"fixed",// "height": "60px",// "top":"40px",// "top":"40%","background":"transparent"}  }]  }}},

DialogNet.vue

<template><view class="my-confirm-notice" id="netDialog"><view class="confirm-content-wrap1" @click=""><!-- 标题 --><div class="unipop__ui_tit"><text class="unipop__ui_tit_text">查询条件</text><image src="../../../static/images/workbeach/icon_close.png" class="close_image" @click="close()"></image></div><!-- 内容 --><div class="content_margin"><div class="flex_row_center label_text label_margin"><text style="font-size: 16px;">实体名称：</text><input type="text" class="inputStyle" placeholder="实体名称" @input="onKeyInput" :value="userName" ></div></div><div v-if="btns" class="unipop__ui_btns"><text v-for="(item,index) in btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text></div></view></view>
</template><script>export default {data() {return {btns:[{text: '重置',style: 'color: #ffffff',},{text: '确定',style: 'color: #ffffff',}],selectCondition:{},userName:'',}},mounted() {console.log('mounted==================1111111111111111')},methods: {close(){this.userName = '';this.selectCondition = {};const subNvue = uni.getSubNVueById('netDialog');subNvue.hide();},btnTaped(item) {console.log(item);if(item.text == '重置') {this.userName = '';this.selectCondition = {};} else {uni.$emit('receiveData',this.selectCondition);this.close();}},onKeyInput(event) {this.userName = event.detail.value;this.selectCondition['storeName'] = this.userName;},}}
</script><style lang="scss">.my-confirm-notice {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);// z-index: 19998;/* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */// -webkit-text-size-adjust: 100%;// -webkit-tap-highlight-color: rgba(0, 0, 0, 0);display: flex;align-items: center;justify-content: center;}.confirm-content-wrap1 {position: relative;left: 0;right: 0;width: 675rpx;/* #ifndef APP-PLUS-NVUE */height: auto;margin: 0 auto;user-select: none;/* #endif */background-color: white;border-radius: 10px;// z-index: 999;}.unipop__ui_tit {background-color: #074498;width: 675rpx;border-top-left-radius: 10px;border-top-right-radius: 10px;height: 44px;display: flex;align-items: center;justify-content: center;}.unipop__ui_tit_text {color: white;text-align: center;line-height: 44px;width: 675rpx;font-size: 16px;}.close_image {z-index: 100;position: absolute;/* #ifndef APP-PLUS-NVUE */float: right;/* #endif */right: 10px;width:30px;height: 30px;}.unipop__ui_btns{height: 80px;justify-content: space-around;display: flex;flex-direction: row;padding-left: 20px;padding-right: 20px;align-items: center;}.btn {width: 80px;height: 34px;background-color: #074498;line-height: 34px;text-align: center;font-size: 13px;border-radius: 6rpx;}.content_margin {padding: 15px 0px 5px 0px;}.flex_row_center {display: flex; flex-direction: row; justify-content: center; align-items: center;}.label_text {font-size: 28rpx;color: #555555;}.label_margin {margin-top: 36rpx;}.inputStyle {border: #bababa 0.5px solid; width: 169px;height: 40px; /* #ifndef APP-PLUS-NVUE */box-sizing: border-box; /* #endif */font-size: 14px; color: #aaaaaa; padding: 3px 5px;}.top_level {position: fixed;z-index: 100;width: 675rpx;}
</style>

注意：

（1）subNVue弹窗的显示，只能使用js的show方法，无法携带参数。

（2）参数传递使用uni.$emit和uni.$on

uni-app 视频播放遇到的问题-video相关推荐

uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
视频盒子APP视频播放源代码安卓+IOS双端源码
介绍: [视频盒子]APP视频播放源代码安卓+IOS双端源码网盘下载地址: http://kekewl.cc/ZDBQ4aSo4HG0 图片:
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...

uni-app 视频播放遇到的问题-video

弹出的全屏窗口：

视频列表页：

video层级过高，导致弹窗显示在底层，解决方法：

uni-app 视频播放遇到的问题-video相关推荐

最新文章

热门文章