Vue如何接入hls/m3u8的直播视频详解

目录
  • 前言
  • 互联网网络流媒体简介
  • 播放HLS格式的视频
    • 安装
    • 实现
  • 坑
  • 总结

前言

最近做了一个后台系统，需要调取工厂监控视频流显示在前端的页面上，其中遇到了一些坑，在这里做个记录，希望对前端小伙伴有所帮助吧！废话不多说了，直接开搞

互联网网络流媒体简介

这块我也不是很懂，博大精深，不在这扯皮了，大家只需要知道常见的几种流媒体格式就行，至于发展与演变，里面的专业知识，我也不懂，主要的流媒体格式有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如何接入hls/m3u8直播视频的文章就介绍到这了,更多相关Vue接入hls/m3u8直播视频内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue2.0+vue-dplayer实现hls播放的示例

    起因 之前写了一篇< vue2.0+vue-video-player实现hls播放>,里边有提到在用vue-video-player之前,我尝试着使用vue-dplayer实现hls播放,但是当时时间紧迫,还没有完成,就换方案了.现在抽时间把它补齐吧. 开始 安装依赖 npm install vue-dplayer -S 编写组件HelloWorld.vue <template> <div class="hello"> <d-player re

  • Vue结合Video.js播放m3u8视频流的方法示例

    首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls

  • 详解vue2.0+vue-video-player实现hls播放全过程

    起因 最近公司想做一套视频点播服务,因为考虑到成本问题,领导希望一切都用开源系统来完成.基于这个出发点,那就肯定排除了各大云视频平台(腾讯云 音视频点播VOD.网易云视频.七牛云.阿里云 视频服务等).其实这里我还是建议购买云视频平台,因为自己造轮子肯定没有别人造的好(专门研发团队除外.以此业务为生的公司除外),再说,云视频平台服务商提供的都是一整套解决方案:收集.存储.转码.播放器等,并且在cdn和弹性扩容上都能得到最大保障. 准备 视频点播最少需要两样东西:流媒体服务.视频播放器. 因为这是

  • vue通过video.js解决m3u8视频播放格式的方法

    vue通过video.js解决m3u8视频播放格式的方法

    前言 今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,

  • 如何在vue中使用video.js播放m3u8格式的视频

    如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • Vue如何接入hls/m3u8的直播视频详解

    Vue如何接入hls/m3u8的直播视频详解

    目录 前言 互联网网络流媒体简介 播放HLS格式的视频 安装 实现 坑 总结 前言 最近做了一个后台系统,需要调取工厂监控视频流显示在前端的页面上,其中遇到了一些坑,在这里做个记录,希望对前端小伙伴有所帮助吧!废话不多说了,直接开搞 互联网网络流媒体简介 这块我也不是很懂,博大精深,不在这扯皮了,大家只需要知道常见的几种流媒体格式就行,至于发展与演变,里面的专业知识,我也不懂,主要的流媒体格式有RTSP,RTMP,HLS,WebRtc,这些足够解决日常开发了 播放HLS格式的视频 为什么要选择H

  • 用python制作词云视频详解

    用python制作词云视频详解

    使用到的第三方库 Package Version --------------- --------- baidu-aip 2.2.18.0 jieba 0.42.1 moviepy 1.0.3 numpy 1.20.2 opencv-python 4.5.1.48 Pillow 8.2.0 requests 2.25.1 wordcloud 1.8.1 you-get 0.4.1520 B站弹幕爬取 思路 通过视频BV号请求cid,再使用cid请求弹幕文件,最后使用正则表达式去匹配弹幕文本,将匹

  • Vue 过渡（动画）transition组件案例详解

    Vue 过渡（动画）transition组件案例详解

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • vue从使用到源码实现教程详解

    vue从使用到源码实现教程详解

    搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • Vue自定义全局Toast和Loading的实例详解

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排). (1). toast.vue <template lang="html"> <div v-if="isShowToast" class="toa

随机推荐