vue播放m3u8格式视频

本文介绍了如何在Vue项目中使用video.js播放m3u8格式的视频。通过安装video.js和videojs-contrib-hls依赖,然后在组件中引用并配置,可以解决H5 video标签无法播放m3u8格式视频的问题。同时提供了使用ref和id两种方法来操作video元素,并提示在处理多个视频时的注意事项。
摘要由CSDN通过智能技术生成

vue播放m3u8格式视频

之前播放视频,直接用的h5的video标签,把地址复制给src就可以直接播放了。但是那个是要mp4格式的,现在的视频是m3u8格式的,播放不了,查了下资料,可以用video.js解决这个问题。

vue的使用方法

  1. 安装依赖
    npm install --save video.js;
    npm install --save videojs-contrib-hls

  2. 在main.js引入全局样式和js文件,也可以在组件局部引入样式,这个看自己的需求

import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import 'videojs-contrib-hls'
  1. 在组件中使用

ref的使用方法

<video ref="singleVideo" autoplay controls width=540 height=540></video>  
/* 记得给video宽高 */
this.singlePlayer = videojs(this.$refs.singleVideo, {
   
autoplay: true<
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
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 格式视频的地址即可。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值