Vue实现视频播放（一）——video.js组件的使用

最新推荐文章于 2024-09-11 10:51:53 发布

viceen

最新推荐文章于 2024-09-11 10:51:53 发布

阅读量1.9k

点赞数 1

分类专栏：工具文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/121633997

版权

工具专栏收录该内容

163 篇文章 7 订阅

订阅专栏

本文介绍了如何在Vue项目中使用video.js组件来实现视频播放功能。首先通过npm安装video.js，并在main.js中引入。接着展示了基本的视频播放示例，包括HTML标签的设置和不同格式的视频源。最后给出了一个实例，展示如何在Vue组件中使用video.js播放指定视频文件，并提供了相应的样式调整。

摘要由CSDN通过智能技术生成

Vue实现视频播放（一）——video.js组件的使用

video.js组件官网——https://www.npmjs.com/package/video.js

1、安装

引入video.js组件

npm install --save-dev video.js

或

cnpm install --save-dev video.js

然后在main.js中引用

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$videos = Video

引用完成后我们就可以做视频列表了

2、基本使用-示例

index.vue

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

3、实例

视频地址链接

https://docs.egret.com/engine/img/engine2d.mp4
https://vjs.zencdn.net/v/oceans.mp4

index.vue

<div>
   <video
       id="my-player"
       class="video-js"
       controls
       preload="auto"
       poster="//vjs.zencdn.net/v/oceans.png"
       data-setup="{}"
       >
        <source
                src="./video.mp4"
                type="video/mp4"
                >
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a
               href="https://videojs.com/html5-video-support/"
               target="_blank"
               >
                supports HTML5 video
            </a>
        </p>
	</video> 
</div>

<style>
   video#my-player.video-js {
    width: 94%;
    height: 100%;
  }
</style>