雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

video.js 对移动端的适配

2024-06-12 分类：前端之旅阅读(251) 评论(0)

先安装依赖

"video.js": "^8.12.0",
"videojs-mobile-ui": "^1.1.1",

1 2	"video.js": "^8.12.0", "videojs-mobile-ui": "^1.1.1",

安装完成后加入到项目

<style>
[v-cloak]{display: none;}
#my-video {
  width: 100%;
  height: 200px;
}
</style>
<template>
  <div class="cloak" v-cloak>
    <span>666</span>
    <div class="h20" style="height:20px"></div>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      // 播放 m3u8
      <source src="https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8">
      <p class="vjs-no-js">
        为了播放视频，请启用 JavaScript 并使用支持 HTML5 video 的浏览器。
      </p>
    </video>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css';
import 'videojs-mobile-ui/dist/videojs-mobile-ui.css';
import videojs from 'video.js' // 引入 video.js
// https://www.npmjs.com/package/videojs-mobile-ui
require('videojs-mobile-ui');
export default {
  name: 'IndexPage',
  components: {},
  data() {
    return {}
  },
  methods: {
    onPlayerReady(player) {
      console.log('Player ready', player);
    },
    initializeVideoPlayer() {
      const player = videojs('my-video');
      player.fluid(true);
      player.mobileUi();
    }
  },
  mounted() {
    this.initializeVideoPlayer();
  },
}
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<style>

[v-cloak]{display: none;}

#my-video {

width: 100%;

height: 200px;

}

</style>

// 播放 m3u8

为了播放视频，请启用 JavaScript 并使用支持 HTML5 video 的浏览器。

</p>

</video>

</div>

</template>

import 'video.js/dist/video-js.css';

import 'videojs-mobile-ui/dist/videojs-mobile-ui.css';

import videojs from 'video.js' // 引入 video.js

// https://www.npmjs.com/package/videojs-mobile-ui

require('videojs-mobile-ui');

export default {

name: 'IndexPage',

components: {},

data() {

return {}

},

methods: {

onPlayerReady(player) {

console.log('Player ready', player);

},

initializeVideoPlayer() {

const player = videojs('my-video');

player.fluid(true);

player.mobileUi();

}

},

mounted() {

this.initializeVideoPlayer();

},

}

</script>

具体介绍:

Touch controls:

Double-tap the left side of the player to rewind ten seconds
Double-tap the right side of the player to fast-forward ten seconds
Single-tap the screen to show a play/pause toggle

Fullscreen control:

Rotate to landscape to enter Fullscreen
Lock to fullscreen on rotate
Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)