114 lines
3.0 KiB
JavaScript
114 lines
3.0 KiB
JavaScript
// packageE/video/video.js
|
||
Component({
|
||
properties: {
|
||
datas: {
|
||
type: null,
|
||
},
|
||
component_id: {
|
||
type: null,
|
||
},
|
||
},
|
||
// 私有数据，可用于模板渲染
|
||
data: {
|
||
emptyImage: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image.png",
|
||
clientWidth: "375",
|
||
|
||
video: {},
|
||
Height: '200',
|
||
imgurlshow: true,
|
||
isVideo: false,
|
||
},
|
||
|
||
lifetimes: {
|
||
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
|
||
attached() {
|
||
console.log(this.properties.datas);
|
||
},
|
||
moved() {},
|
||
detached() {},
|
||
},
|
||
|
||
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
|
||
attached() {},
|
||
// 此处attached的声明会被lifetimes字段中的声明覆盖
|
||
ready() {
|
||
this.isMp4(this.data.datas.video_url.video_url);
|
||
let _Context = `myVideo${this.data.component_id}`;
|
||
this.videoContext = wx.createVideoContext(_Context, this);
|
||
this.setData({
|
||
video: this.data.datas.video_url.video_url,
|
||
});
|
||
if (this.data.datas.video_url.isShowPoster == "0") {
|
||
this.setData({
|
||
imgurl: "",
|
||
});
|
||
} else {
|
||
this.setData({
|
||
imgurl: this.data.datas.video_url.poster,
|
||
});
|
||
}
|
||
this.videoScrollHandle()
|
||
// this.setData({
|
||
// clientWidth: wx.getSystemInfoSync().windowWidth,
|
||
// });
|
||
},
|
||
|
||
pageLifetimes: {
|
||
// 组件所在页面的生命周期函数
|
||
show() {},
|
||
hide() {},
|
||
resize() {},
|
||
},
|
||
methods: {
|
||
//判断是否MP4
|
||
isMp4(src) {
|
||
if (src.endsWith(".mp4")) {
|
||
this.setData({
|
||
isVideo: true,
|
||
});
|
||
} else {
|
||
this.setData({
|
||
isVideo: false,
|
||
});
|
||
}
|
||
},
|
||
imgurlshowbtn() {
|
||
this.videoContext.play();
|
||
this.setData({
|
||
imgurlshow: false,
|
||
});
|
||
},
|
||
bindended() {
|
||
this.setData({
|
||
imgurlshow: true,
|
||
});
|
||
},
|
||
bindloadedmetadata(e){
|
||
let winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
|
||
let imgh = e.detail.height; //视频高度
|
||
let imgw = e.detail.width; //视频宽度
|
||
let videoH = winWid * imgh / imgw + "px"; //等比设置高度。 即 屏幕宽度 / video高度 = 视频宽度 / 视频高度 ==》video高度 = 屏幕宽度 * 视频高度 / 视频宽度
|
||
if (parseInt(videoH)) {
|
||
this.setData({
|
||
Height: parseInt(videoH) + "px" //设置高度
|
||
});
|
||
}
|
||
},
|
||
videoScrollHandle(){
|
||
/** 监控视频是否需要播放 */
|
||
// let {screenWidth, screenHeight} = wx.getSystemInfoSync(); //获取屏幕高度
|
||
let _Context = `#myVideo${this.data.component_id}`;
|
||
const videoObserve = this.createIntersectionObserver()
|
||
videoObserve.relativeToViewport()
|
||
.observe(_Context, (res) => {
|
||
let {intersectionRatio} = res
|
||
if(intersectionRatio === 0) {
|
||
this.videoContext.pause()//离开视界，停止播放
|
||
}else{
|
||
//进入视界，开始播放
|
||
}
|
||
})
|
||
}
|
||
},
|
||
});
|