uniapp2/pages/videoDetail/videoDetail.vue

<template>
	<view>
		<view class="timeBox flex justify-between align-center padding-lr-sm">
			<view class="time">火点侦测摄像机</view>
		</view>
		<view class="basic-info">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				基本信息
			</view>
			<view class="info-content">
				<view class="info-one-info ">
					<text>设备名称：</text>
					<text>{{videoDetail.deviceName}}</text>
				</view>
				<view>
					<text>设备编号：</text>
					<text>{{videoDetail.deviceCode}}</text>
				</view>
				<view>
					<text style="width:auto!important">物联网卡号：</text>
					<text>{{videoDetail.sim}}</text>
				</view>
				<view>
					<text>安装位置：</text>
					<text>{{videoDetail.deviceInstallationPosition}}</text>
				</view>
				<view>
					<text>添加时间：</text>
					<text>{{videoDetail.addTime}}</text>
				</view>
				<view>
					<text>设备地址：</text>
					<text>{{videoDetail.address}}</text>
				</view>
			</view>
		</view>

		<!-- 处理状态start -->
		<view class="processStatus">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				视频
			</view>
			<view class="padding-lr padding-bottom-lg video-js" ref="video"
				style="width: 95%; margin: 0 auto; height: 250px;">

				<!-- <video ref="myVideo" :src="videoUrl" style="width:100%" loop="loop" autoplay="autoplay"></video> -->

				<!--  <view class="video-js" ref="video" style="text-align:center;width:100%;height:400rpx">  
				
				        </view>  -->

				<!-- <video id="example_video_1" style="width:100%" class="video-js vjs-default-skin" controls preload="none"
					width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png">
					<source :src="videoUrl" type="application/x-mpegURL">
				</video> -->

			</view>
		</view>
		<!-- 处理状态end -->

	</view>
</template>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
	import Videojs from 'video.js'
	import 'video.js/dist/video-js.min.css'

	export default {
		data() {
			return {
				videoDetail: '',
				videoUrl: "",
				player: '',
				video: '',
				// VideoJs: null,
			}
		},
		onReady() {},
		onLoad: function(option) {


			console.log(111)
			console.log(option.deviceCode)
			this.companyCode = option.companyCode
			this.deviceType = option.deviceType
			// this.videoUrl = 'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
			// this.videoUrl = 'http://videocdn.didano.com/school765class0channelId2761namedingdangm/playlist.m3u8'
			// this.videoUrl = 'https://iot.usky.cn/hls/' + option.deviceCode + '.m3u8';
			this.videoUrl = 'http://47.103.74.123/hls/' + option.deviceCode + '.m3u8';
			console.log(this.videoUrl)
			this.getDeviceDetail({
				"companyCode": option.companyCode,
				"deviceType": option.deviceType,
				"deviceCode": option.deviceCode
			})
		},


		methods: {
			async getDeviceDetail(ming = {}) {
				let that = this;

				const res = await this.$myRequest({
					url: 'OperationMonitoring/getMonitoringScreen',
					data: ming
				})
				console.log(res.data.data[0])
				this.videoDetail = res.data.data[0]

				setTimeout(() => {
					let video = document.createElement('video');
					video.id = 'video';
					video.style = 'width: 100%; height: 100%;';
					video.controls = true;
					video.preload = "auto"
					// video.autoplay = 'autoplay'
					video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
					video.setAttribute('webkit-playsinline', true);
					video.setAttribute('custom-cache', false)//禁用第三方缓存加载
					//这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
					// video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
					let source = document.createElement('source');
					// source.src = 'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
					// source.src = 'http' + this.videoUrl.split('https')[1]
					source.src = this.videoUrl
					// source.src = './12/C60389215.m3u8'
					// console.log(source.src)
					source.type = 'application/x-mpegURL';
					video.appendChild(source);
					this.$refs.video.$el.appendChild(video);

					this.player = Videojs('video', {
						bigPlayButton: true, //是否显示播放按钮
						poster: '', // 视频封面图地址
						title: '4564564',
						playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
						autoDisable: true,
						preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
						language: 'zh-CN',
						fluid: true, // 自适应宽高
						muted: false, //  是否静音
						aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
						controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
						autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
						loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
						screenshot: true,
						controlBar: {
							volumePanel: { //声音样式
								inline: false // 不使用水平方式
							},
							timeDivider: true, // 时间分割线
							durationDisplay: true, // 总时间
							progressControl: true, // 进度条
							remainingTimeDisplay: true, //当前以播放时间
							fullscreenToggle: true, //全屏按钮
							pictureInPictureToggle: true, //画中画
						}
					}, function() {
						// this.play()
						// 播放 this.play()
						// 停止 – video没有stop方法，可以用pause 暂停获得同样的效果
						// 暂停 this.pause()
						// 销毁 this.dispose()
						// 监听 this.on(‘click‘,fn)
						// 触发事件this.trigger(‘dispose‘)

						this.on('error', function(err) { //请求数据时遇到错误
							console.log("请求数据时遇到错误", err)
						});
						this.on('stalled', function(stalled) { //网速失速
							console.log("网速失速", stalled)
						});
						this.on('play', function() { //开始播放
							console.log("开始播放")
						});
						this.on('pause', function() { //暂停
							console.log("暂停")
						});
						// this.on('timeupdate', function(timeupdate) {
						// 	console.log(timeupdate)
						// })
					});
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	/deep/.vjs-big-play-button {
		position: absolute;
		left: 0;
		right: 0;
		top: 90px;
		margin: 0 auto;
	}
</style>