video可以和canvas 同时使用么？
在使用canvas画图时 v-if动态隐藏video标签 在开发者工具可以显示画布并且可以保存画布到相册 但是使用真机时就不显示画布但是能保存画布到相册 是为什么？
<template>
<view class="body">
<video
id="myVideo"
:src="backUrl"
:autoplay="true"
:controls='false'
[@play](/user/play)="livePlay"
[@pause](/user/pause)="liveStop"
:enable-play-gesture="true"
:enable-progress-gesture="true"
:show-play-btn="true"
[@progress](/user/progress)="live"
[@error](/user/error)="err"
[@timeupdate](/user/timeupdate)="loading"
style="width: 100%; height: 100%;line-height: 1;"
object-fit="fill"
v-if="canv"
>
<!-- <view class="live-bg"> -->
<view class="live-hd" :style="{top: myPhone+'rpx'}">
<view class="d-icon" [@tap](/user/tap)="back">
<view class="iconfont icon-fanhui" style="font-size: 20px;color: \#fff;"></view>
</view>
<view class="d-logo" [@click](/user/click)="togglePopup('information','getInfor')">
<image :src="list.liveinfo.facepic" class="img"></image>
</view>
<view class="d-name" style="flex: 1;">
<view class="h1">
<view class="text-overflow-1">
{{list.name}}
</view>
</view>
<view class="watch">
<view class="m-r-20">
<cover-view class="controls-title" [@click](/user/click)="openShares()">简单的自定义 controls</cover-view>
{{list.watchnum}} 观看
</view>
<view>
{{list.liveinfo.follow}} 关注
</view>
</view>
</view>
<view class="follow" [@tap](/user/tap)="follow" v-if="list.liveinfo.followstatus==0">
<block style="line-height: 13rpx;">关注</block>
<!-- 关注 -->
</view>
<view class="roomid" style="margin-right: 20rpx;position: static;">{{roomId}}</view>
</view>
<view class="live-ft-nav" style="box-sizing: border-box;">
<view class="gwd" id="gwd-pro" [@click](/user/click)="togglePopup('Auction','getgoods')">
<view class="num">{{list.goodsnum}}</view>
<image :src="imgBaseUrl+'live-gwd.png'" class="img"></image>
</view>
<view class="" style="width: 400rpx;" [@touchmove](/user/touchmove)="backMove" [@touchstart](/user/touchstart)="liveClick">
<view class="vid-border">
</view>
<view class="vid-btn" :style="{left: backLong+'rpx'}">
</view>
</view>
<view class="fenxiang" [@click](/user/click)="openShares()">
<image :src="imgBaseUrl+'live-fenxiang.png'" class="img"></image>
</view>
<view class="dianzan" [@tap](/user/tap)="setGood">
<view class="num">{{list.goodnum}}</view>
<image :src="imgBaseUrl+'live-dianzan.png'" class="img"></image>
</view>
<view style="position: absolute;bottom: 170rpx;right: 40rpx;" v-for="(item,k) in arr" :key="k">
<image :src="item.scr" mode="" style="width: 60rpx;height: 60rpx;" :style="{'transform': 'rotate('+item.up+'deg)'}" :animation="item.animation"></image>
</view>
</view>
<view class="videoTime">
{{newHours<10?0:''}}{{newHours}}:{{newMin<10?0:''}}{{newMin}}:{{newSec<10?0:''}}{{newSec}}
</view>
<view class="z-time">
{{zHour<10?0:''}}{{zHour}}:{{zMin<10?0:''}}{{zMin}}:{{zSec<10?0:''}}{{zSec}}
</view>
<!-- </view> -->
<gift ref='gif' [@change](/user/change)="changeShowShare"></gift>
</video>
<!-- 分享选择 -->
<uni-popup ref="shares" type="bottom" [@showTextarea](/user/showTextarea)="showTextarea">
<view class="Box">
<view class="uni-share po">
<view class="live-fenxiang-layer-c">
<view class="li">
<button class="link share" open-type="share" [@tap](/user/tap)="cancel('shares')">
<view class="tb">
<image src="/static/index/fenxiang-2.png" class="img">
</view>
<view class="title">微信</view>
</button>
</view>
<view class="li" [@click](/user/click)="createCanvasImageEvn()">
<button class="link share">
<view class="tb">
<image src="/static/index/saveimg.png" class="img">
</view>
<view class="title">保存图片</view>
</button>
</view>
</view>
<view class="live-fenxiang-layer-close" [@click](/user/click)="cancel('shares')">
关闭
</view>
</view>
</view>
</uni-popup>
<hchPoster ref="hchPoster" :canvasFlag.sync="canvasFlag" [@cancel](/user/cancel)="canvasCancel" :posterObj.sync="posterData"/>
<view :hidden="canvasFlag"><!-- 海报 要放外面放组件里面 会找不到 canvas-->
<canvas class="canvas" canvas-id="myCanvas" :style="{width:(windowWidth)+'px !important',height:(windowHeight)+ 'px !important'}"></canvas><!-- 海报 -->
</view>
</view>
</template>
<script>
import hchPoster from '@/components/hch-poster/hch-poster.vue'
import uniTransition from "@/components/uni-transition/uni-transition.vue"
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import gift from '@/components/gift/gift.vue'
export default {
data() {
return {
canv:true,
windowWidth:"",
windowHeight:"",
canvasFlag: true,
imgBaseUrl:this.imgBaseUrl,
msg:"",
bottom:130,
guanzhu: false, //关注加载控制
// 付款成功
show: false,
stategz: false, //关注
reward: false, //围观奖励
myPhone:'',
list:{},
roomId:'',
newHours:0,//实时
newMin:0,//实分
newSec:0,//实秒
zHour:1,
zMin:1,
zSec:1,
timeLi:'',
timeWu:'',
timeCome:false,
backUrl:'',
backLong:113,
videoContext:1,
timeSec:'',
videoLook:1,
animationData:'',
cutss:true,
arr:\[\]
}
},
components: {
gift,
uniPopup,
hchPoster,
uniTransition
},
onLoad(e) {
uni.showLoading({
title:'正在加载中'
})
this.roomId = e.id
if(e.scene){
let scene=decodeURIComponent(e.scene);
let scene1=scene.split("&")
this.roomId = scene1\[0\].split("=")\[1\]
this.shareid = scene1\[1\].split("=")\[1\]
}
let phoneData = wx.getSystemInfoSync();
this.windowHeight = phoneData.windowHeight\*0.6;
this.windowWidth = phoneData.windowWidth\*0.6;
this.$store.state.roomId = e.id
this.videoContext = uni.createVideoContext('myVideo')
this.videoContext.requestFullScreen({ direction: 0 });
// this.videoContext.requestFullScreen(0)
this.backUrl = e.url
this.phone()
this.getLive()
console.log(this.list)
this.$refs.hchPoster.getUserInfo1();// 获取个人信息
},
methods: {
createCanvasImageEvn(){
this.$refs.hchPoster.saveCanvasImage();//保存图片
this.canvasFlag = true;
this.$refs.shares.close()
},
openShares(){
console.log(111)
this.canv = false
setTimeout(()=>{
this.canvasFlag=false;//显示canvas海报
// this.$refs.shares.close();
this.$refs.hchPoster.createCanvasImage1();//调用子组件的方法
},2500)
this.$refs.shares.open()
},
cancel(val){
this.canv = true
this.canvasFlag = true;
this.$refs.shares.close()
},
// 取消海报
showTextarea(e){
this.canvasFlag = e;
},
// 取消海报
canvasCancel(val){
this.canvasFlag=val;
},
err(){
uni.showToast({
icon:'none',
title:'视频出错了'
})
clearInterval(this.videoLook)
},
//视频播放
livePlay(){
console.log('开始播放')
uni.hideLoading()
console.log(123321)
clearInterval(this.videoLook)
this.videoLook = setInterval(()=>{
// 播放结束
if(this.newSec==this.zSec&&this.newMin==this.zMin&&this.newHours==this.zHour){
this.newSec = 0
this.newMin = 0
this.newHours = 0
this.backLong = 113
this.videoContext.seek(0)
this.videoContext.stop()
clearInterval(this.videoLook)
return false
}
this.newSec++
if(this.newSec == 60){
this.newSec = 0
this.newMin++
if(this.newMin == 60){
this.newHours++
}
}
},1000)
},
liveStop(){
clearInterval(this.videoLook)
console.log('暂停播放')
},
// 点击进度条
liveClick(e){
console.log(e.changedTouches\[0\].pageX\*2)
if(113<e.changedTouches\[0\].pageX\*2&&473>e.changedTouches\[0\].pageX\*2){
this.backLong = e.changedTouches\[0\].pageX\*2
}else if(this.backLong<113){
this.backLong = 113
}else if(this.backLong >473){
this.backLong = 473
}
let time = (this.backLong-113)/3.6\*(this.timeSec/100)
console.log(this.backLong-113)
this.videoContext.seek(time)
this.timejisuan(time)
},
//滑动进度条
backMove(e){
console.log(e.changedTouches\[0\].pageX\*2)
if(113<e.changedTouches\[0\].pageX\*2&&473>e.changedTouches\[0\].pageX\*2){
this.backLong = e.changedTouches\[0\].pageX\*2
}else if(this.backLong<113){
this.backLong = 113
}else if(this.backLong >473){
this.backLong = 473
}
let time = (this.backLong-113)/3.6\*(this.timeSec/100)
console.log(time)
this.videoContext.seek(time)
this.timejisuan(time)
},
//滑动或点击时时间变化
timejisuan(e){
this.newMin = e/60
this.newSec = Math.floor(e-Math.floor(this.newMin)\*60)
this.newHours = this.newMin/60
if(this.newHours>=1){
this.newHours = Math.floor(this.newHours)
}else{
this.newHours = 0
}
this.newMin = Math.floor(this.newMin-this.newHours\*60)
},
//计算总时长
loading(e){
console.log(121211,this.cutss)
this.backLong = (e.detail.currentTime/e.detail.duration)\*360+113
console.log(this.backLong)
if(this.cutss){
console.log(11,e,'触发')
this.cutss = false
this.timeSec = e.detail.duration
this.zMin = e.detail.duration/60
this.zSec = Math.floor(e.detail.duration-Math.floor(this.zMin)\*60)
this.zHour = this.zMin/60
if(this.zHour>=1){
this.zHour = Math.floor(this.zHour)
}else{
this.zHour = 0
}
this.zMin = Math.floor(this.zMin-this.zHour\*60)
console.log(this.zHour,this.zMin,this.zSec)
}
},
// 进度条与视频进度同步
live(e){
// console.log(e)
// this.backLong = 113+e.detail.buffered\*3.6
},
onShareAppMessage: function(e) {
console.log(e)
console.log(this.list.shareinfo.desc)
console.log(this.list.shareinfo.wxminpath)
console.log(this.list.shareinfo.picurl)
return {
title: this.list.shareinfo.title,
path: this.list.shareinfo.wxminpath,
imageUrl:this.list.shareinfo.picurl,
}
},
inputMsg(){
this.goRoom(6)
},
focusTop(e){
console.log(e.detail.height)
this.showSend = true
this.bottom = e.detail.height\*2 + 130
},
blurTop(){
this.showSend = false
this.bottom = 130
},
// 关注
async follow(){
let res = await this.$api.post('/UserForLive/following',{
liveid:this.list.liveid,
type:1
})
this.list.liveinfo.followstatus = 1
uni.showToast({
title:'关注成功'
})
},
async setGood(){
let randomImg = Math.floor(Math.random() \* 3)
let arrImg = \[this.imgBaseUrl+'zan1.png',this.imgBaseUrl+'zan2.png',this.imgBaseUrl+'zan3.png'\]
let obj = {
animation: '',
up:70-(Math.random()\*140),
scr:arrImg\[randomImg\]
}
this.arr.push(obj)
setTimeout(()=>{
obj.animation = uni.createAnimation({
duration: 2000,
timingFunction: 'ease'
})
obj.animation.scale(3).translate(0,-30).opacity(0).step()
obj.animation = obj.animation.export()
},0)
let res = await this.$api.post('/UserLiveRoom/setGood',{
roomid:this.roomId
})
this.list.goodnum = res.data.goodnum
},
async getLive(){
console.log(this.roomId)
let res = await this.$api.post('/UserLiveRoom/detail',{
roomid:this.roomId,
islog:1
})
console.log(111,res)
this.list = res.data
this.$store.state.liveRoom = res.data
this.$refs.gif.getInfor()
this.$refs.hchPoster.getInfor()
this.$refs.hchPoster.getImgCode(this.list.shareinfo.wxminpath);//调用子组件的获取二维码
},
timer(e){
e.cut = false
},
// 获取用户机型
phone(){
let res=uni.getSystemInfoSync()
this.myPhone=res.statusBarHeight\*2
},
// 返回上一层
async back(){
uni.navigateBack({
delta: 1
})
},
//打赏
async togglePopup(tip,kip) {
// console.log()
if(kip == 2){
this.$store.state.hongbaoCut = false
this.$refs.gif.hongbaoQie()
}else if(kip == 1){
this.$store.state.hongbaoCut = true
console.log(this.$store.state.hongbaoCut)
this.$refs.gif.hongbaoQie()
}
if(kip=='getGift'||kip=='getgoods'){
this.$refs.gif\[kip\]()
}
this.$refs.gif.togglePopup(tip)
}
}
}
</script>
<style scoped>
[@import](/user/import) '../../../static/css/style.css';
/\* [@media](/user/media) screen and (min-height: 811px) {
.live-hd{
top: 150rpx;
}
} \*/
/\* \#ifdef MP-TOUTIAO \*/
[@font-face](/user/font-face) {
font-family: 'ALTGOT2N';
src: url('~@/static/css/ALTGOT2N.TTF');
}
/\* \#endif \*/
.body{
height: 100%;
overflow: hidden;
}
.grayed {
background-color: skyblue !important;
}
.follow text {
margin: auto auto;
}
.msgInp{
position: absolute;
width: 100%;
height: 100rpx;
background-color: \#fff;
display: flex;
justify-content: space-between;
}
.msgInp input{
flex: 1;
height: 100%;
padding-left: 15rpx;
}
.msgInp view{
background: \#00B060;
line-height: 100rpx;
color: \#fff;
padding: 0 30rpx;
}
.jiang{
background-image: -webkit-linear-gradient(0deg, rgb(255, 146, 5) 0%, rgb(241, 56, 14) 100%);
border: \#fff 1px solid;
padding: 3rpx 6rpx;
color: \#fff;
font-size: 22rpx;
position: absolute;
bottom: 80rpx;
right: 120rpx;
border-radius: 100rpx;
z-index: 1;
}
.vid-border{
height: 4rpx;
background-color: \#CCCCCC;
margin: 30rpx 20rpx;
}
.vid-btn{
width: 20rpx;
height: 20rpx;
border-radius: 10rpx;
background-color: \#C3A688;
position: absolute;
bottom: 63rpx;
}
.videoTime{
font-size: 20rpx;
position: absolute;
bottom: 30rpx;
left: 120rpx;
color: \#fff;
}
.z-time{
font-size: 20rpx;
position: absolute;
bottom: 30rpx;
left: 400rpx;
color: \#fff;
}
.canvas{
position: fixed !important;
top: 12% !important;
left: 20% !important;
display: block !important;
z-index: 99999;
/\* background-color: red; \*/
}
</style>
强力驱动