vue使用video.js

会说法语的猪

已于 2022-07-03 21:28:00 修改

阅读量3.2k

点赞数 1

分类专栏：前端 vue 文章标签：前端 vue.js

于 2022-04-05 16:28:53 首次发布

本文链接：https://blog.csdn.net/m0_51431448/article/details/123971590

版权

前端同时被 2 个专栏收录

128 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

vue

80 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客详细介绍了如何通过npm安装video.js、videojs-contrib-hls和@videojs/http-streaming库来支持HLS和MPEG-DASH视频播放。然后展示了如何在Vue组件中引入这些库，封装视频组件，并监听视频URL变化以动态更新播放源。同时，配置了播放器的控制条、播放选项和销毁方法，确保视频播放的顺畅和资源的合理释放。

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

1. 安装

npm install video.js --save
npm install videojs-contrib-hls  --save
npm install @videojs/http-streaming  --save

2. 按需引入

import videojs from 'video.js'
import 'videojs-contrib-hls'
import "@videojs/http-streaming"

3. 视频组件封装

<doc>
  视频组件
</doc>
<template>
  <video :id="id" style="width: 100%;height: 100%;" class="video-js vjs-default-skin" preload="auto">
    <!-- <source src="rtsp://8.140.174.140:8045/s1" type="application/x-mpegURL"> -->
    <source :src="videoU