vue2怎么实时获取m3u8格式的视频播放时长

<template>
  <div>
    <video ref="video" controls autoplay muted></video>
  </div>
</template>
 
<script>
import Hls from 'hls.js';
 
export default {
  name: 'VideoPlayer',
  mounted() {
    const video = this.$refs.video;
 
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('https://8c809f0-hd.m3u8');//换成自己的链接
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    }
    //实时获取播放时间
    video.addEventListener('timeupdate', () => {
      console.log( video.currentTime,'111');
    });
  }
};
</script>

Vue 3 可以使用第三方的视频播放库来实现播放 .265 M3U8 格式视频。一个常用的库是 `video.js`,它是一个开源的 HTML5 视频播放器。以下是一个示例代码: 首先,安装 `video.js` 和 `videojs-contrib-hls`(用于支持 M3U8 格式): ```bash npm install video.js npm install videojs-contrib-hls ``` 然后,在 Vue 组件中使用 `video.js`: ```html <template> <div> <video ref="videoPlayer" class="video-js vjs-default-skin" controls></video> </div> </template> <script> import videojs from 'video.js'; import 'video.js/dist/video-js.css'; import 'videojs-contrib-hls'; export default { mounted() { // 创建 video.js 实例 this.player = videojs(this.$refs.videoPlayer, { techOrder: ['html5'] }, () => { // 播放 M3U8 格式视频 this.player.src({ src: '视频地址.m3u8', type: 'application/x-mpegURL' }); }); }, beforeDestroy() { // 销毁 video.js 实例 if (this.player) { this.player.dispose(); } } }; </script> <style> /* video.js 样式 */ @import '~video.js/dist/video-js.css'; </style> ``` 在上述代码中,我们首先导入并引入了 `video.js` 和 `videojs-contrib-hls` 库。然后,在组件的 `mounted` 钩子函数中,创建了一个 `video.js` 实例,并设置 `techOrder` 为 `['html5']`,表示优先使用 HTML5 播放器。 在 `video.js` 的回调函数中,使用 `player.src()` 方法来设置视频源,其中 `src` 为视频地址,`type` 为视频类型,这里是 M3U8 格式视频。 最后,在组件的 `beforeDestroy` 钩子函数中,销毁 `video.js` 实例。 在使用时,将视频地址替换为实际的 .265 M3U8 格式视频的地址即可。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xingxingwuxin

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值