uni app 视频播放功能

不念不忘少年蓝@ 2022-12-26 13:28 258阅读 0赞

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

[媒体组件video][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>

[video]: https://uniapp.dcloud.io/component/video
[uni.createVideoContext]: https://uniapp.dcloud.io/api/media/video-context?id=createvideocontext