uniapp视频播放器

微信小程序使用hic-video-player
app(android和ios)使用好用视频播放器注:用的是旧版本的这个组件

uniapp视频播放器_第1张图片
uniapp视频播放器_第2张图片
目前只有app中支持竖屏横批选集
android视频全屏是通过


	beforeDestroy() {
			// #ifdef APP-VUE
			// 页面关闭时关闭沉浸模式
			if (uni.getSystemInfoSync().platform == "ios") {
				plus.navigator.setFullscreen(false);
			}
			plus.screen.lockOrientation(this.options.generallyDirection);
			// #endif
		},
	// 部分代码
	launchFullscreenRender() {
			if (document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document
					.webkitFullscreenElement  || this.container && this.container.style.position == 'fixed') {
					return
				}
		let dom = document.getElementById('yingbing-video' + this.videoPhoneNormalProp.dataId) || {}
		var rfs = dom.requestFullscreen || dom.mozRequestFullScreen || dom.msRequestFullscreen || dom
				.webkitRequestFullscreen
		// 通过获取视频video所在的标签 向浏览器申请该标签全屏展示
		// 然后通过plus.screen.lockOrientation来设置屏幕旋转方向
		if (typeof rfs != 'undefined' && rfs) {
			dom.addEventListener('fullscreenchange', this.fullscreenchanged);
			dom.addEventListener('mozfullscreenchange', this.fullscreenchanged);
			dom.addEventListener('msfullscreenchange', this.fullscreenchanged);
			dom.addEventListener('webkitfullscreenchange', this.fullscreenchanged);
			rfs.call(dom)
		} else {
		// 如果不支持全屏api就使用css设置标签全屏展示 可以设置page-meta中的style来防止触摸穿透
			this._fullscreenerror(dom)
		}
	},
	_fullscreenerror(dom) {
		this.container = dom
		if (dom) {
				dom.style.position = 'fixed';
				dom.style.background = '#000';
				dom.style.left = 0;
				dom.style.right = 0;
				dom.style.bottom = 0;
				dom.style.top = 0;
				dom.style.width = '100vw';
				dom.style.height = '100vh';
				dom.style.zIndex = 9999999;
				this.fullscreenchanged()
			
			}
		},
		fullscreenchanged(event) {
				if (document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document
					.webkitFullscreenElement || this.container && this.container.style.position == 'fixed') {
					this.triggerMethod('fullscreenChange', true)
				} else {
					this.triggerMethod('fullscreenChange', false)
				}
			},
		triggerMethod(name, args) {
				// #ifndef H5
				this.$ownerInstance.callMethod(name, args);
				// #endif
				// #ifdef H5
				this[name](args);
				// #endif
			},
		// 判断如果是ios的话设置全屏 把导航栏高度设置为0 然后把状态栏关掉就可以展示全屏了
		fullscreenChange(e) {
				this.fullScreen = e;
				this.$emit('fullScreenChange', e)
				var platform = uni.getSystemInfoSync().platform

				// #ifdef APP-VUE
				if (this.fullScreen) {
					
					if (platform == 'ios') {
						let pages = getCurrentPages()
						let page = pages[pages.length - 1];
						this.currentWebview = page.$getAppWebview();
						let titleNView = this.currentWebview.getStyle().titleNView
						if (titleNView.height != 0) {
							this.tempTitleNView = {
								...titleNView
							}
						}
						titleNView.height = 0
						titleNView.autoBackButton = false
						this.currentWebview.setStyle({
							titleNView: titleNView
						})
						plus.navigator.setFullscreen(true);
					}
					// console.log(this.options.fullScreenDirection)
					// portrait-primary 竖屏
					// landscape-primary 横屏
					plus.screen.lockOrientation(this.options.fullScreenDirection);
				} else {
					if (platform == 'ios') {
						// console.log(this.currentWebview )
						// console.log(this.currentWebview.videoFullscreen )
						this.currentWebview.setStyle({
							titleNView: this.tempTitleNView
						})

						plus.navigator.setFullscreen(false);
					}
					// plus.orientation.clearWatch(wo)
					plus.screen.lockOrientation(this.options.generallyDirection);
				}
				// #endif
			},
			exitFullscreenRender() {
				if (document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document
					.webkitFullscreenElement) {
					const cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen ||
						document.webkitExitFullscreen
					if (typeof cfs != 'undefined' && cfs) {
						cfs.call(document)
					}
				} else {
					if (this.container && this.container.style.position == 'fixed') {
						this.container.style.position = 'relative';
						this.container.style.width = '100%';
						this.container.style.height = '100%';
						this.container.style.top = 'inherit';
						this.container.style.left = 'inherit';
						this.container.style.right = 'inherit';
						this.container.style.bottom = 'inherit';
						this.container.style.zIndex = 'inherit';
						this.container.style.transform = 'inherit';
						this.fullscreenchanged()
						// this._cssfullscreenchange();
					}
				}
			},
	

需要注意的是ios使用设置屏幕锁定方向时需要设置一些信息
uniapp视频播放器_第3张图片

小程序只支持设置倍速

你可能感兴趣的:(uni-app,音视频)