如何用Vue来接入hls/m3u8的直播视频演示

3403771864 发布于2022-10-26 22:08 / 471人阅读

　　现在直播很流行，心里痒痒就试试。

　　互联网网络流媒体简介

　　不讲多，我们只需要知道常见的几种流媒体格式就行，至于发展与演变，里面的专业知识，主要的流媒体格式有RTSP,RTMP,HLS,WebRtc，这对于开发就足够。

　　播放HLS格式的视频

　　为什么要选择HLS格式的视频呢？因为浏览器没有办法支持播放RTSP，无法识别这种类型的视频流，RTMP格式的视频是需要借助Flash否则也是无法播放，但是Chrome 88彻底禁用Flash，于是跟同事商量选择了HLS，接下里就是踩坑的开始

　　安装

　　前端采用插件video.js

　　npm install --save video.js

　　要注意下载的版本要在7.0以上，主要是因为此版本以上的不需要因为安装videojs-contrib-hls插件，它是用来解析HLS视频的，但是只要你的版本在7.0以上就无需安装，直接使用

　　"video.js": "^7.19.2",

　　实现

　　<template>
　　<div>
　　<video
　　id="my-video"
　　class="video-js vjs-default-skin"
　　controls
　　preload="auto"
　　width="500px">
　　<source :src="srcUrl" />
　　</video>
　　</div>
　　</template>
　　<script>
　　import videojs from "video.js";
　　export default {
　　props:{
　　"srcUrl":{
　　type:String,
　　default:'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
　　}
　　},
　　mounted() {
　　this.getVideo();
　　},
　　methods:{
　　getVideo() {
　　videojs(
　　"my-video",
　　{
　　bigPlayButton: true,
　　textTrackDisplay: false,
　　posterImage: true,
　　errorDisplay: false,
　　controlBar: false
　　},
　　function() {
　　this.play();
　　}
　　);
　　},
　　}
　　}
　　</script>

　　main.js 引入样式

import 'video.js/dist/video-js.css'

　　代码已经准备就绪，其实用上面就可以不再参照其他，影响自己的判断力。

　　其实提醒只需要将vlc的编码器信息改为h264,一切都是顺利成章了，当然这个需要联系给你视频地址的那个人进行配合，已经都完成了。你可以试一试。

混合云超融合服务器如何用vue开发实时音视频如何用国外的服务器呢如何用微博推广自己的网站如何用微博宣传自己的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128211.html

前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，过往项目 2018 年 9 月份项目汇总（共 26 个项目） 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（...

twohappy 2019-08-05 17:41 评论0 收藏0
前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，过往项目 2018 年 9 月份项目汇总（共 26 个项目） 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（...

muddyway 2019-08-30 15:44 评论0 收藏0
前端每日实战 2018 年 6 月份项目汇总（共 27 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如过往项目 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 6 月份发布的项目 ...

jokester 2019-08-22 18:25 评论0 收藏0
前端每日实战 2018 年 6 月份项目汇总（共 27 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如过往项目 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 6 月份发布的项目 ...

ruicbAndroid 2019-08-05 14:17 评论0 收藏0
前端每日实战 2018 年 6 月份项目汇总（共 27 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如过往项目 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 6 月份发布的项目 ...

dingding199389 2019-08-02 10:48 评论0 收藏0