vue使用vue-h265-player播放h265编码格式视频流

最新推荐文章于 2024-08-04 14:40:39 发布

@琴酒**

最新推荐文章于 2024-08-04 14:40:39 发布

阅读量5.8k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40042416/article/details/129612600

本文介绍了如何在Vue项目中使用vue-h265-player组件来播放h265编码的视频流。首先，需要通过npm安装并拷贝libDecoder.wasm文件到public目录。然后，在模板中引入H265Player组件，并设置播放链接及错误处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GitHub地址

vue-h265-player

支持h265编码格式视频流播放

vue使用vue-h265-player

1、安装vue-h265-player

npm install vue-h265-player

2、拷贝libDecoder.wasm文件到public目录下

复制node_modules/h265-player/lib/libDecoder.wasm文件到public目录下

在这里插入图片描述

3、示例代码

url: 需要播放的链接，播放器会根据该值的变化自动重启。
maxRetryCount: 最大尝试重连次数，到达次数上限后会触发 on-errorevents:
on-error: 链接不可用时会触发该方法

<template>
  <div id="app">
    <H265Player
      @on-error="handleOnError"
      :url="url"
      style="width: 80vw;height:45vw"
    />
  </div>
</template>

<script>
  import H265Player from 'vue-h265-player';

  export default {
    name: 'App',
    components: {
      H265Player,
    },
    data: () => ({
      url: 'a h265 hls url',
    }),
    methods: {
      handleOnError(error) {
        console.log('error: ', error);
      },
    },
  };
</script>