H5_module/martial/components/videoPreview/index.vue

<template>
	<view>
		<view class="img-bg" @click="closePreview">

			<view class="banner">
				<video style="background: red;" id="myVideo" :src="src" @fullscreenchange="fullscreenchange"></video>
			</view>
			<view class="full ddflex" @click.stop="fullscreen">
				<image style="width: 37rpx;height: 32rpx;margin-right: 10rpx;" src="../../static/images/m_qp.png"></image>
				全屏观看
			</view>
			<view class="img-content" :style="(isShowAll?'background-color: rgba(255,255,255,0.1);':'')+(true?'bottom:calc(30rpx + 106rpx);':'')">
				<view :class="isShowAll||content.length<12?'':'img-content-tovers'">
					<view :style="isShowAll?'white-space: pre-wrap;':''">{{styleContent(content)}}</view>
					<view style="height: 46rpx;" v-if="isShowAll"></view>
				<view v-if="content.length>12" class="img-content-more" :style="isShowAll?'padding-bottom:10rpx;':''" @click.stop="showAll">{{isShowAll?'收起':'展开'}}</view>
				</view>
			</view>
			<view class="img-btn" :style="product?'bottom:calc(30rpx + 106rpx);':''" @click="btnClick">一键转发</view>
			
			<view class="video-pro ddflex" v-if="product" @click.stop="jumpUrl('/product/detail/detail?id='+product.id)">
				<image class="video-pro-pic" :src="product.icon" mode="aspectFill"></image>
				<view class="fflex tover video-pro-title">{{product.title}}</view>
				<view class="ddflex video-pro-btn">
					视频同款
					<image class="video-pro-btn-icon" src="/static/images/more3.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../../utils/request.js");

	export default {
		components: {},
		props: {
			imageList:{
				type:Array,
				default:()=>{return []}
			},
			previewIndex:{
				type:Number,
				default:0
			},
			content:{
				type:String,
				default:''
			},
			product:{
				type:Object,
				default:null
			},
			src:{
				type:String,
				default:''
			},
			material:{
				type:Object,
				default:()=>{return {}}
			}
		},
		data() {
			return {
				swiperCurrent:0,
				isShowAll:false
			}
		},
		onLoad(options) {

		},
		onShow() {

		},
		mounted() {
			if(this.previewIndex){
				this.swiperCurrent = this.previewIndex
			}
			this.videoContext = uni.createVideoContext('myVideo', this)
			this.videoContext.play()
		},
		methods: {
			jumpUrl(url){
				this.videoContext.pause()
				uni.navigateTo({
					url:url
				})
			},
			fullscreen() {
				this.videoContext.requestFullScreen()
				if(this.material.params.videoType==2){
					plus.screen.lockOrientation('landscape-primary')
				}else{
					plus.screen.lockOrientation('portrait-primary')
				}
			},
			fullscreenchange(e){
				if(!e.detail.fullScreen){
					plus.screen.lockOrientation('portrait-primary')
				}
			},
			showAll(){
				this.isShowAll = !this.isShowAll
			},
			closePreview(){
				this.$emit('videoPreviewClose')
			},
			btnClick(){
				this.$emit('videoPreviewClick')
			},
			styleContent(value){
				return value.replace(/<br\/>/g, "\n")
			}
		},
	}
</script>

<style>
	@import "./index.css";
</style>