草庐IT

vue + videojs-contrib-hls 拉流播放

远方__98 2023-03-28 原文

当时接手拉流播放时使用的是西瓜播放器插件，神奇的是 安卓手机显示正常，但是苹果一直显示加载，pc端使用https格式不能播放，但是去掉s改为http即可进行播放 后面查看大佬文章后总算解决了这一需求 原文地址

步骤1.下载videojs-contrib-hls依赖(没有下载video.js的也下载一下这个)

npm i videojs-contrib-hls --save

npm i video.js --save

步骤2. main中引入video-js.css

import 'video.js/dist/video-js.css'; // video.js样式

步骤3.vue页面代码

<template>

      <div class="viedo" v-show="status == 4">

        <video

          id="my-video"

          class="video-js vjs-default-skin vjs-big-play-centered"

          controls

          preload="auto"

          width="375"

          height="200"

          :poster="coverpic"

        >

          <source

            v-show="hlsDownAddress"

            :src="hlsDownAddress"

            type="application/x-mpegURL"

          />

        </video>

      </div>

    </template>

步骤4.在使用的页面中引入videojs-contrib-hls和video.js

import videojs from 'video.js';

import 'videojs-contrib-hls';

步骤5.在data中先定义一下

data(){

return{

player: null,

  }

}

步骤6.methos中写配置

methods:{

getVideo() {

      this.player = videojs(

        'my-video',

        {

          bigPlayButton: true, // 显示播放按钮

          textTrackDisplay: false,

          posterImage: true,

          errorDisplay: false,

          controlBar: true, // 显示控件

        },

        function() {

          if (this.hlsDownAddress) {

            this.play();

          }

        }

      );

    }

}

步骤7.在挂载方法使用

mounted(){

  // 延迟一秒来唤起播放器

    this.timers = setTimeout(() => {

      that.$nextTick(() => {

        that.getVideo();

      });

    }, 1000);

}

步骤8.页面关闭的时候销毁

  beforeDestroy() {

    this.player.dispose(); // 关闭控件

  },

好啦，赶紧测试一下吧，有什么问题的话，可以一起探讨哈，觉得还不错的话，可以点点关注，一键三连啊

videojs-contrib-hlsvideojsvideo

有关vue + videojs-contrib-hls 拉流播放的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. ruby - 如何以编程方式将 mp3 转换为 itunes 可播放的 aac/m4a 文件？ - 2

    我一直在寻找一种以编程方式或通过命令行将mp3转换为aac的方法，但没有成功。理想情况下，我有一段代码可以从我的Rails应用程序中调用，将mp3转换为aac。我安装了ffmpeg和libfaac，并能够使用以下命令创建aac文件:ffmpeg-itest.mp3-acodeclibfaac-ab163840dest.aac当我将输出文件的名称更改为dest.m4a时，它无法在iTunes中播放。谢谢! 最佳答案 FFmpeg提供AAC编码功能(如果您已编译它们)。如果您使用的是Windows，则可以从here获取完整的二进制文件。

  3. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  4. ruby - 如何播放 mp3 文件？ - 2

    我如何用ruby​​编写一个脚本，当从命令行执行时播放mp3文件(背景音乐)？我试过了run="mplayer#{"/Users/bhushan/resume/m.mp3"}-aosdl-vox11-framedrop-cache16384-cache-min20/100"system(run)但它也不起作用，以上是播放器特定的。如果用户没有安装mplayer怎么办。有没有更好的办法？ 最佳答案 我一般都是这样pid=fork{exec'mpg123','-q',file} 关于ruby

  5. vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2

    平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  6. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：

  7. ruby 声音播放 - 2

    这是2009年，早在2001年左右，ruby中的声音播放就没有好的绑定(bind)。有变化吗？我正在寻找可以控制原始声音或mp3、ogg和flac播放的东西。我的谷歌搜索已经枯竭。编辑:Linux、OSX，如果可能的话还有Windows。 最佳答案 您没有提到平台。Thispage描述了win32-sound库，它似乎至少支持WAV播放。对于一个更加平台中立的方式，Ruby/SDL为广受欢迎的SDL提供绑定(bind)图书馆。 关于ruby声音播放，我们在StackOverflow上找到

  8. Vue3的新特性 - 2

    Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工

  9. vue2+element-ui,el-aside侧边栏容器收缩与展开 - 2

    一、概览实现效果如下：二、项目环境1、nodejs版本node-vv16.16.02、npm版本npm-vnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location=global`instead.8.15.03、vue脚手架版本vue-V@vue/cli5.0.8三、创建vue项目1、创建名为vuetest的项目vuecreatevuetest选择Default（[Vue2]babel,eslint）  2、切换到项目目录，启动项目cdvuetestnpmrunserve 3、使用浏览器预览 http://localh

  10. Vue学习笔记：Vue element-ui中table组件的使用----接入后端数据 - 2

    记个笔记以免遗忘，建议还是查看Element-UI提供的官方文档学习，自己摸索比较难受官方文档：Element-UI组件TableElement-UI官网提供了许多Table格式，这里以一个带有筛选器的表格为例表格的官网显示效果：直接将官方提供的示例代码贴入.vue文件中即可使用显示的数据是通过data()方法提供的假数据。方法见下：data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1

随机推荐