使用vue-video-player，播放rtmp直播流

可直接在新的页面复制使用。测试可用

<template>
	<div class="video-js" style="width: 600px;">
		<video-player class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
        >
			</video-player>
		</div>
</template>
 
<script>
 
	// import videojs from 'video.js'
	import 'vue-video-player/src/custom-theme.css'
	import { videoPlayer } from 'vue-video-player'
	import 'videojs-flash'
	//  SWF_URL="https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf"
 
	videojs.options.flash.swf = "https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf" // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
 
	export default {
		name: 'videojs',
		components: {
			videoPlayer
		},
		
		data() {
			return {
            videoUrl:'rtmp://10.10.7.205:1936/live/rtsp_cam1',
	        playerOptions: {        
			live: true,
	        autoplay: true, // 如果true，浏览器准备好时开始播放
	        muted: false, // 默认情况下将会消除任何音频
	        loop: false, // 是否视频一结束就重新开始
	        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
	        aspectRatio: '7:4', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
	        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
	       	language: 'zh-CN',
					// poster:'https://file.digitaling.com/eImg/uimages/20150907/1441607120885946.gif',
	 		controlBar: {       
			  timeDivider: true,
	          durationDisplay: true,
	          remainingTimeDisplay: true,
	          currentTimeDisplay: true, // 当前时间
	          volumeControl: true, // 声音控制键
	          playToggle: true, // 暂停和播放键
	          progressControl: true, // 进度条
	          fullscreenToggle: true // 全屏按钮
			},
			techOrder: ['flash', 'html5'],//设置顺序，
	        flash: { 
				hls: {withCredentials: false },
				swf: "https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf" },
	 			html5: { hls: { withCredentials: false } },
	        sources: [{          
				type: 'rtmp/flv',
			    src: 'rtmp://10.10.7.205:1936/live/rtsp_cam1' // 视频地址-改变它的值播放的视频会改变
			}],
			notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
			}
 
			}
		},
		methods: {
         // 加载数据
    onPlayerLoadeddata(player) {
      // 直播每次播放都会调用--录播只是刚开始调用一次
      console.log("loadeddata");
    },
    onPlayerCanplaythrough(player) {
      // 在不停下来进行缓冲的情况下--每次拖拽的时候都会缓冲
      console.log("canplaythrough");
    },
    onPlayerPlay(player) {
      console.log("播放");
      console.log(player)
    },
    onPlayerPause(player) {
      console.log("暂停");
    },
		},
		watch: {
			/*test: function(val, oldVal){},*/
		},
		/* 页面初始化执行方法：此方法可写同步方法，有先后加载顺序的逻辑建议用同步方法 */
	mounted: function() {
		this.playerOptions.sources[0].src = this.videoUrl;
		this.playerOptions.autoplay = true; //再次告诉是自动播放
	}
	}
</script>
 
<style lang="scss" scoped>
</style>