欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue播放直播流

程序员文章站 2022-03-07 20:18:55
vue播放m3u8视频流npm 下载npm install dplayer --savenpm hls.js --save在mina.js中 window.Hls = require('hls.js')在用到需要视频播放的页面import DPlayer from 'dplayer';

vue播放m3u8视频流

  • npm 下载
	npm install dplayer --save
	npm hls.js --save
  • 在mina.js中
	 window.Hls = require('hls.js')
  • 在用到需要视频播放的页面
	<!-- 引入插件 -->
	import DPlayer from 'dplayer';
	<!-- 设置容器 -->
	<div id="dplayer" style="width:100%;height:100%"></div>
	
	data(){
		rerutn{
			 dplayer:null
		}
	}
	mounted() {
      this.dplayer = new DPlayer({
        	container: document.getElementById('dplayer'),
            live: true, //是否直播
            autoplay: true, //是否自动播放
            lang: "zh-cn", //设置中文
            video: {
              url:"http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
              type: "hls", //这一步必须要写,播放直播流
            }
          });
    }
	

测试流

  1. CCTV1:http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
  2. 不知名:https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8

测试视频流是否可用 去看看

本文地址:https://blog.csdn.net/weixin_45374947/article/details/107287678