zhxf-app/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">

				<view class="video-js" ref="video">

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

	</view>
</template>




<script>
	export default {
		data() {
			return {
				videoDetail: '',
				deviceCode: ''

			}
		},
		onReady() {
			
		},
		onLoad: function(option) {

			this.getVideo()
			console.log(111)
			console.log(option.deviceCode)
			this.companyCode = option.companyCode
			this.deviceType = option.deviceType
			this.deviceCode = option.deviceCode



			this.getDeviceDetail({
				"companyCode": option.companyCode,
				"deviceType": option.deviceType,
				"deviceCode": option.deviceCode
			})
		},


		methods: {

			getVideo() {


			},

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

			},
		}
	}
</script>

<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> 
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script>
	// #ifdef H5
	var video = document.createElement('video')
	video.id = 'video'
	video.style = 'width: 300px;height: 150px;'
	video.controls = true
	var source = document.createElement('source')
	source.src =
		'http://yf.ugc.v.cztv.com/cztv/ugcvod/2018/04/14/A98CD7B26B06D94A5CEA56AA7D723572/h264_800k_mp4.mp4_playlist.m3u8'
	video.appendChild(source)
	this.$refs.video.$el.appendChild(video)
	videojs('video')
	// #endif  
	
</script>

<style lang="scss">






</style>