<template> <view class="content" v-if="content"> <view class="acitve-content"> <video id="myvideo" autoplay direction="0" @fullscreenchange="fullscreenchange" :title="title" :src="content" controls></video> </view> <view class="titles">{{title}}</view> </view> </template> <script> import { shopBannerDetail } from '@/api/video.js' export default { data() { return { title: null, content: '', bannerSn: null } }, onLoad(opts) { if(opts.form=='videoList'){ this.title = opts.title this.content = opts.content this.videoFull() }else{ this.bannerSn = opts.sn this.getDetail() } }, methods: { fullscreenchange(e, direction){ if(!e.detail.fullScreen){ uni.navigateBack() } }, videoFull(){ const videos = uni.createVideoContext('myvideo',this) videos.requestFullScreen() }, getDetail(){ shopBannerDetail({bannerSn:this.bannerSn}).then(res => { this.title = res.data.bannerName this.content = res.data.content uni.setNavigationBarTitle({ title: '视频内容' }) this.videoFull() }) } } } </script> <style lang="less"> page{ padding: 0; } .content{ padding: 0; .titles{ text-align: center; padding: 20rpx; font-weight: bold; } .acitve-content{ padding: 0; video{ width:100%; } } } </style>