首页 > 其他分享 >vue m3u8 视频流 hls

vue m3u8 视频流 hls

时间:2022-11-29 14:46:36浏览次数:61  
标签:vue console log m3u8 视频流 hls hlsjs video

参考:https://blog.csdn.net/a15297701931/article/details/115478652

cnpm hls.js
          <video
            ref="videoElement"
            id="videoElement"
            muted
            style="width: 100%; height: 100%; object-fit: fill"
            :src="videoUrl"
          ></video>
import hlsjs from "hls.js";

data(){
return {
    videoUrl: "http://****.m3u8",
}
}


    //播放
    show() {
      this.video = this.$refs.videoElement; //定义挂载点
      console.log(this.video);
      if (hlsjs.isSupported()) {
        this.hlsjs = new hlsjs();
        this.hlsjs.loadSource(this.videoUrl); //设置播放路径
        this.hlsjs.attachMedia(this.video); //解析到video标签上
        console.log(this.hlsjs);
        this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log("加载成功");
        });
        this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
          //   console.log(event, data);
          // 监听出错事件
          console.log("加载失败");
        });
      } else {
        this.$message.error("不支持的格式");
        return;
      }
    },



  mounted() {
    this.show();
  },

 

标签:vue,console,log,m3u8,视频流,hls,hlsjs,video
From: https://www.cnblogs.com/jqynr/p/16935344.html

相关文章

  • 搞懂vue3的ref、reactive、toRef、toRefs
    首先需要明确这四个函数都是用于在setup中创造响应式变量的。四个函数都需要从vue中导出:import{ref,reactive,toRef,toRefs}from'vue'总结:reactive对比ref从......
  • vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of unde
    https://blog.csdn.net/ZouZhaoqian/article/details/125779621?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFro......
  • vue 路由中编程式导航
    在vue中,实现路由跳转有两种方式1.声明式导航:router-link(一般情况都使用这个)2.编程式导航:this.$router.push  和  this.$router.replace  在什么情况......
  • Vue 前端解析 Excel 数据
    想要在前端实现Excel表格数据的解析,需要安装xlsx包:npminstallxlsx然后在需要使用的地方引入:import*asXLSXfrom'xlsx/xlsx.mjs'使用ElementUI提供......
  • vuecli3配置文件路径别名
    vue.config.js文件中module.exports={configureWebpack:{resolve:{alias:{'assets':'@/assets','common':'@/common',......
  • vue3-vite下tailwindcss安装与配置
    初始化TailwindCSS安装Tailwind以及其它依赖项:npminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest一、创建您的配置文件接下来,生成您的 t......
  • vue3-vite下配置postcss-pxtorem进行移动端适配
    如果使用Vue进行移动端页面的开发,需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。amfe-flexableamfe-flex......
  • VUE中循环绑定ref
    <template><divclass="flex"><el-buttonv-for='(item,index)inlist':type=item.type@click=click(item):ref="'ref'">{{item.value}}</el-......
  • vue3响应式原理以及ref和reactive区别还有vue2/3生命周期的对比,第二天
    前言:前天我们学了ref和reactive,提到了响应式数据和Proxy,那我们今天就来了解一下,vue3的响应式在了解之前,先复习一下之前vue2的响应式原理vue2的响应式:原理:对......
  • vue ts md5加密
    安装一下ts-md5npminstallts-md5引入import{Md5}from'ts-md5'使用letresult=Md5.hashStr('加密文本')去看看教程......