<!--
 * @Author: 张涛
 * @Date: 2023-11-07 13:43:46
 * @LastEditors: 张涛
 * @LastEditTime: 2023-11-07 13:58:16
 * @FilePath: \JiangNingUmale-App\subcontract\work\videocenter\play.vue
-->
<template>
	<view class="uni-flex-item">
		 <video
      class="video"
      ref="video"
      id="video"
      :src="src"
      :autoplay="autoplay"
      @play="playVideo()"
      @fullscreenchange="screenchange"
    ></video>
	
	</view>
</template>

<script lang="uts">
	export default {
		onReady() {
			this.videoContext = uni.createVideoContext('video', this);
		},
		data() {
			return {
				videoContext: null,
				// 属性
				src: "http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
				_src: "http://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
				autoplay: true,
				poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
				_poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
			}
		},
		methods: {
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			error(e) {
				console.error('live-player error:', e.detail.errMsg)
			},
			playVideo() {
				uni.createVideoContext('video', this).requestFullScreen();
				screen.orientation.lock('landscape');
			},
			screenchange() {
				screen.orientation.lock('landscape');
			}
		}
	}
</script>

<style>
	.video {
		width: 750rpx;
		height: 400rpx;
	}
</style>