uni app 视频播放功能

视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器、安卓原生和iOS等


媒体组件video
首先使用video组件,然后高度需要自己设置

uni.createVideoContext
官方新建的uni app 的demo工程,this.context.requestFullScreen 全屏是通过按钮点击的执行的,我需要一进入应用就全屏,实际执行代码无效果,最后改成动态绑定屏幕高度值,也能实现。

onReady() {
    this.context = uni.createVideoContext("video1", this);
},
methods: {
    fullScreen() {
        this.context.requestFullScreen({
            direction: 90
        });
    }
}

最后代码如下:
<template>
		<video id="myVideo" :style="{ height: windowHeight + 'px' }" style="width: 100%;"
		:src="videourl"
		@error="videoErrorCallback" ></video>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				videourl: ''
			}
		},
		onLoad(options) {
			console.log(this.videourl)
			this.videourl = options.videourl;
		},
		mounted: function (res) {
			var that = this;
			uni.getSystemInfo({
			    success: function (res) {
					that.windowHeight = res.windowHeight;
			    }
			});
		},
		methods: {
			videoErrorCallback: function(e) {
				console.log(e)
			},
		}
	}
</script>

<style>
</style>

你可能感兴趣的:(uni-app)