videojs使用

发表于 更新于 本文字数： 2.3k 阅读时长 ≈ 2 分钟

如何引入videojs

引入videojs的css js, 给video元素加上video-js类，并加上data-setup属性， 这样就videojs就可以正常工作了

cdn

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>videojs</title>
  <!-- 引入css -->
  <link rel="stylesheet" href="https://vjs.zencdn.net/7.8.4/video-js.css">
</head>

<body>
  <video
    class="video-js"
    controls
    width="640"
    poster="poster.jpg"
    data-setup="{}">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <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>
  <!-- 引入js -->
  <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>

</html>

这个加过视频封面的样子

这是视频播放时的界面

npm

npm install --save-dev video.js

安装完成后，需要引入css和js

import 'video/dist/video-js.css'
import videojs from 'videojs'

更改主题

通过cdn

引入主题样式，并向video元素添加相应的主题类，例如 vjs-theme-city

<video id="player" class="video-js vjs-theme-city">
<!-- city -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/city/index.css">
<!-- fantasy -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css">
<!-- forest -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/forest/index.css">
<!-- sea -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/sea/index.css">

city theme

fantasy theme

forest theme

sea theme

通过npm

通过npm安装主题样式

npm install @videojs/themes

然后模块引入

// city
import '@videojs/themes/dist/city/index.css'
// fantasy
import '@videojs/themes/dist/fantasy/index.css'
// forest
import '@videojs/themes/dist/forest/index.css'
// sea
import '@videojs/themes/dist/sea/index.css'

然后在我们的player播放器的video元素添加类

<video id="player" class="video-js vjs-theme-city"></video>