在vue展示萤石云监控视频

效果:

萤石云开放平台appKey申请可在开放平台官网注册登录https://open.ys7.com/view/app/app_edit.html（官网）

萤石云开放平台:https://open.ys7.com/console/device.html

就可以拿到一个地址,复制下来,在下面或用到

代码:

<template>
  <div class="home">
		 <iframe
          v-if="srcUrl != ''"
          :src="srcUrl"
          frameborder="0"
          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
     	   ></iframe>
 
          </div>
</template>
<script>
  
export default {
 data() {
    return {
	srcUrl:'',
	accessToken :'',
		},
	
	},
method:{
  //获取accessToken-摄像头 
//  video =   https://open.ys7.com/api/lapp/
	async BWgetaccessToken() { 
      await service
        .post(
          video +
            "/token/get?appKey=*********&appSecret=*******"
        )
        .then((res) => {
          console.log(res, "获取accessToken");
          this.accessToken = res.data.data.accessToken;
         
          this.srcUrl =
           "https://open.ys7.com/ezopen/h5/iframe_se?url=" +
            "ezopen://open.ys7.com/***设备号***/1.hd.live" +
            "&autoplay=1&audio=1&accessToken=" +
             this.accessToken;
        })
        .catch((err) => {
          console.log(err, "失败");
          this.$message({
            message: "失败",
            type: "error",
          });
        });
    },
	}
	}
</script>

方法二:
需要安装下载video和 videojs-contrib-hls

“videojs-contrib-hls”: “^5.15.0”,
“vue”: “^2.6.11”,



随便复制一个地址

代码:

<template>
  <div class="videobox" v-if="videosrc != ''">
          <video ref="videoPlayer" id="video" class="video-js">
            <!-- <source :src="videosrc" type="rtmp/flv" /> -->
            <source :src="videosrc" type="application/x-mpegURL" />
          </video>
        </div>
</template>

<script>
import "videojs-contrib-hls";
import Videojs from "video.js";
import "video.js/dist/video-js.css"; 
 export default {

 data() {
    return {
	videosrc:'',
	  }, 
	},
 mounted() {
     this.videosrc =
              "https://open.ys7.com/v3/openlive/*****_1_2.m3u8?*********";
            this.$nextTick(() => {
              Videojs(this.$refs.videoPlayer, {
                muted: true, //muted : true/false 是否静音
                controls: false,
                BigplayButton: false,
                autoplay: true,
                fluid: true, //Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器。
                // aspectRatio: "10:6",
                aspectRatio: "16:9",
                fullscreen: {
                  options: {
                    navigationUI: "hide",
                  },
                },
                techOrder: ["html5"], // 兼容顺序
                flvjs: {
                  mediaDataSource: {
                    isLive: false,
                    cors: true,
                    withCredentials: false,
                  },
                },
              });
            }); 
         
	}
	}
</script>

这样就可以了