要做的功能就是当video暂停时把当前的图像用canvas画下来
<view class="content">
<video
id="myVideo"
src="{{items.fileUrl}}"
bindtap="bindClckVideo"
controls="{{true}}"
show-fullscreen-btn="{{false}}"
show-play-btn="{{false}}"
show-center-play-btn="{{false}}"
enable-progress-gesture="{{false}}"
enable-play-gesture="{{true}}"
loop="{{true}}"
autoplay="{{true}}"
object-fit="{{items.coverType == 1 ? 'cover' : 'contain'}}"
custom-cache="{{false}}"
bindcontrolstoggle="bindcontrolstoggle"
bindloadedmetadata="bindloadedmetadata"
>
<image wx:if="{{!isPlaying}}" class="mv_image_player" src="../../../images/player.png"></image>
<canvas id="cvs1" type="2d" class="map" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' canvas-id="cvs1" disable-scroll="true" ></canvas>
</video>
</view>
const app = getApp();
Page({
data: {
isPlaying: true,
imgUrl: '',
sceneNum:0,
canvasWidth: '',
canvasHeight: ''
},
onLoad: function (option) {
},
bindMark() {
let that = this
wx.showLoading({
title: '请稍等',
})
// 设备像素
const dpr = wx.getSystemInfoSync().pixelRatio
console.log(dpr)
wx.createSelectorQuery().select('#myVideo').context(res => {
// 获取myvideo
const video = res.context
wx.createSelectorQuery().selectAll('#cvs1').node(res => {
const ctx1 = res[0].node.getContext('2d')
const _canvas = res[0].node;
res[0].node.width = 300 * dpr
res[0].node.height = 150 * dpr
ctx1.drawImage(video, 0, 0, res[0].node.width, res[0].node.height);
console.log('画完图了')
wx.canvasToTempFilePath({
canvas: _canvas,
success: function (res) {
var tempFilePath = res.tempFilePath;
that.data.sceneNum++
if(that.data.sceneNum ===1){
that.bindMark()
return
}
console.log(tempFilePath);
that.setData({
img:tempFilePath
})
wx.hideLoading()
wx.navigateTo({
url: '/pagesubject/sceneVideo/sceneVideo?tempFilePath=' + tempFilePath,
})
},
fail: function (res) {
console.log(res);
}
}, that)
}).exec()
}).exec()
},
onHide() {
},
onShow() {
//选择id
var that = this;
wx.createSelectorQuery().selectAll('#cvs1').node(res => {
console.log('select canvas', res)
const c = res[0].node
const ctx1 = res[0].node.getContext('2d')
console.log('清除canvas画布数据宽高:', c.width, c.height)
ctx1.clearRect(0, 0, c.width, c.height)
// 给canvas宽高
var query = wx.createSelectorQuery();
query.select('#myVideo').boundingClientRect(function (rect) {
console.log('设置canvas高度:', rect.width, rect.height)
that.setData({
canvasHeight: rect.height,
canvasWidth: rect.width,
})
}).exec();
}).exec()
},
})