在vue3中使用video.js, 切换m3u8时,无法切换一直加载的问题解决方法

本文介绍了如何在Vue3.3.8项目中使用Video.js8.6.1处理m3u8格式视频流的切换,强调了在切换时的pause(),reset(),poster()和load(),play()方法,并提醒读者在vue3中无需设置type为application/x-mpegURL。

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

"vue": "^3.3.8",
"video.js": "^8.6.1",
const player = videoJs(
    playerRef.value,
    {
      html5: {
         hls: {
          withCredentials: true,
        },
      },
    
      sources: [
        {
          src: url,
        },
      ],
    },

切换的时候

    player.pause();
    player.reset();
    player.poster(poster);
    toRaw(player).src({ src: value });
    player.load();
    player.play();

注意点:

1. 不需要设置

type: "application/x-mpegURL"

2.在vue3中切换m3u8格式的文件时候需要toRaw

要在Vue项目中实现m3u8视频流的播放并支持清晰度切换,首先需要确保已经安装了Video.js及其对m3u8支持的贡献包Video.js-contrib-hls。接着,创建一个Vue组件并在其中引入Video.js的样式文件。然后,在组件的模板中添加一个video元素,并指定m3u8视频流的URL。在组件的脚本部分,利用Vue的生命周期钩子函数`mounted`来初始化Video.js播放器,并通过Video.js提供的API实现清晰度切换的功能。 参考资源链接:[VueVideo.js实战:播放m3u8视频流教程](https://wenku.csdn.net/doc/645c91ca95996c03ac3c355d?spm=1055.2569.3001.10343) 此过程中,需要注意的是,Video.js对于m3u8视频流的支持是通过videojs-contrib-hls插件实现的,因此在安装Video.js后,还需要单独安装此插件。此外,对于清晰度切换功能的实现,需要在Video.js实例上注册事件监听器,并根据用户的选择动态更新播放器的视频源。这可能涉及到监听视频源加载成功事件,并在事件触发设置新的播放源URL。 为了更深入地理解和实践这一过程,推荐阅读《VueVideo.js实战:播放m3u8视频流教程》。该教程详细介绍了在Vue项目中集成Video.js,并通过实例逐步指导如何播放m3u8格式的视频流,以及如何添加清晰度切换功能。通过学习这份资料,你将能够掌握在前端开发中处理视频流的有效方法,并能够根据项目需要灵活运用这些技术。 参考资源链接:[VueVideo.js实战:播放m3u8视频流教程](https://wenku.csdn.net/doc/645c91ca95996c03ac3c355d?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值