uniapp h5使用videojs播放直播流

uniapp yekong

uniapp h5使用videojs播放直播流
使用uniapp开发的项目视频监控播放页面,要求播放hls.m3u8的视频流。

"http://192.168.1.1:90/rtp/45010/hls.m3u8"

安装依赖

"mux.js": "^6.2.0",
"video.js": "^8.0.3",
"videojs-contrib-hls": "^5.15.0"
cnpm i mux.js video.js videojs-contrib-hls --save

需要安装mux.js,否则会报文件查找失败:'mux.js/lib/tools/parse-sidx' at node_modules/_video.js@8.0.3@video.js/dist/video.es.js:1的错误。

main.js 引入依赖

import Videojs from 'video.js'
import 'video.js/dist/video-js.min.css' 

Vue.prototype.$video = Videojs

播放页面引入

<template>
	<view class="attachments">
		<div class="video-js" ref="videos" style="width: 100%;height: 100%;">
		</div>
		<div class="shipinBodyF">
			<!-- 			<div class="shuaxin" @click='getdata'>
				<image src="../../../static/message/icon_shuaxin.png"></image>
			</div> -->
			<div class="caozuo">
				<div class="jianji" @click="screenShot('videoElement')">
					<image src="../../../static/message/icon_jianji.png"></image>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		playstart
	} from '@/config/api.js'
	import configs from '@/config/config.js'
	export default {
		data() {
			return {
				configs,
				img: '',
				flvUrl: '',
				show: true
			}
		},
		props: {
			channelId: {
				type: String,
				default () {
					return ''
				}
			},
			deviceId: {
				type: String,
				default () {
					return ''
				}
			},
		},
		mounted() {
			this.getdata()
		},
		watch: {
			deviceId() {
				this.getdata()
			},
		},
		methods: {
			getPlay() {
				let video = document.createElement('video');
				video.id = 'video';
				video.style = 'width: 100%; height: 100%;';
				video.controls = true;
				video.preload = "auto"
				video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
				video.setAttribute("crossOrigin", "anonymous");
				video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放,也就是不是全zhi屏播放的video标签的一个属性
				video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
				let source = document.createElement('source');
				source.src = this.flvUrl;
				video.appendChild(source);
				// return
				this.$refs.videos.appendChild(video);
				let that = this;
				let player = this.$video('video', {
					poster: '', // 视频封面图地址
					title: '4564564',
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoDisable: true,
					preload: 'auto', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
					language: 'zh-CN',
					fluid: true, // 自适应宽高
					muted: false, //  是否静音
					aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
					controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
					autoplay: "muted", //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
					loop: true, // 导致视频一结束就重新开始。 视频播放结束后,是否循环播放
					controlBar: {
						volumePanel: { //声音样式
							inline: false // 不使用水平方式
						},
						timeDivider: true, // 时间分割线
						// durationDisplay: true, // 总时间
						// progressControl: true, // 进度条
						remainingTimeDisplay: true, //当前以播放时间
						fullscreenToggle: true, //全屏按钮
						pictureInPictureToggle: true, //画中画
					}
				}, function() {
					this.on('error', function(err) { //请求数据时遇到错误
						console.log("请求数据时遇到错误", err)
					});
					this.on('stalled', function(stalled) { //网速失速
						console.log("网速失速", stalled)
					});
					this.on('play', function() { //开始播放
						console.log("开始播放")
						// player.pause()
					});
					this.on('pause', function() { //暂停
						console.log("暂停")
					});
					// this.on('timeupdate', function(timeupdate) {
					// 	// console.log(timeupdate)
					// })
				});
			},
			refresh() {
				this.show = false
				this.$nextTick(() => {
					this.show = true
				})
			},
			screenShot(id) {
				var player = document.getElementsByTagName('video')[0]; //获取video的Dom节点
				var canvas = document.createElement("canvas");
				var img = document.createElement("img");
				canvas.width = player.clientWidth;
				canvas.height = player.clientHeight;
				console.log(player)
				console.log(canvas)
				canvas.getContext("2d").drawImage(player, 0, 0, canvas.width, canvas.height); //截
				var dataURL = canvas.toDataURL("image/png"); //将图片转成base64格式
				console.log(dataURL)
				this.downFile(dataURL, "截图.png"); //下载截图
			},

			//下载截图
			downFile(data, fileName) {
				var save_link = document.createElementNS(
					"http://www.w3.org/1999/xhtml",
					"a"
				); //有效的内部空间URI
				save_link.href = data;
				save_link.download = fileName;
				var event = document.createEvent("MouseEvents");
				event.initMouseEvent(
					"click",
					true,
					false,
					window,
					0,
					0,
					0,
					0,
					0,
					false,
					false,
					false,
					false,
					0,
					null
				);
				save_link.dispatchEvent(event);
			},
			async getdata() {
				var that = this;
				var data = ''
				console.log(this.channelId)
				console.log(this.deviceId)
				await playstart(this.deviceId, this.channelId, {
					params: {},
					custom: {
						auth: true
					}
				}).then(res => {
					console.log(res)
					that.flvUrl = res.data.hls
					that.getPlay()
				}).catch(err => {

				})
				return data
			},
		}
	}
</script>

<style scoped lang="scss">
	.attachments {
		width: 690rpx;
		height: 500rpx;
		position: absolute;

		.shipinBodyF {
			position: absolute;
			height: 100rpx;
			left: 0;
			bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			width: 100%;
			z-index: 10000000;
			pointer-events: none;

			.caozuo {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: flex-start;
				margin-right: 30rpx;

				.jianji {
					image {
						width: 38rpx;
						height: 41rpx;
						pointer-events: initial;
					}
				}

				.fangda {
					margin-left: 60rpx;
					display: none;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		video {
			width: 690rpx;
			height: 500rpx;
			border-radius: 26rpx 26rpx 0 0;
		}

		.video-js {
			width: 690rpx;
			height: 500rpx;
			border-radius: 26rpx 26rpx 0 0;
		}
	}
</style>

喜欢