admin管理员组

文章数量:1122851

video

尝试解决在华为安卓手机无法全屏的问题

浏览器标识:

Mozilla/5.0 (Linux; Android 6.0; HUAWEI NXT-L29 Build/HUAWEINXT-L29) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.77 Mobile Safari/537.36 ENSS/0.1

使用video.js

官网教学:.html

1离线安装npm包

把包放在根目录,安装我下载的离线npm包npm install video.js-7.17.0.tgz

根据官网文档,安装后要在main.js里面先引入css import 'video.js/dist/video-js.css'

2封装一个组件专门用来放视频

根据官网封装的例子,封装一个vue组件专门用来播放视频,所有的配置,包括src等都是传进去的参数

<template><div><video ref="videoPlayer" class="video-js   vjs-default-skin vjs-big-play-centered"></video></div>
</template><script>
import videojs from 'video.js';export default {name: "VideoPlayer",props: {options: {type: Object,default() {return {};}}},data() {return {player: null}},mounted() {this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {//console.log('onPlayerReady', this);})},beforeDestroy() {if (this.player) {this.player.dispose()}}
}
</script>

我在class里面加了两个类用来让按钮居中(查到的,文档里,或者网上搜)

 vjs-default-skin vjs-big-play-centered

3使用封装的组件

自己使用的时候就这样使用(官网就这样写的):

<template><div><video-player :options="videoOptions"/></div>
</template><script>
import VideoPlayer from "@/components/VideoPlayer.vue";export default {name: "VideoExample",components: {VideoPlayer},data() {return {videoOptions: {autoplay: true,controls: true,sources: [{src:".mp4",type: "video/mp4"}]}};}
};
</script>

引入这个组件传一下配置就行

4例子

可以自己传配置

如果安装了video.js还不能全屏

如果安装了video.js还不能全屏,那就按照下面做:

参考来源:

1安装与使用

npm install videojs-landscape-fullscreen-11.33.0.tgz
然后根据文档使用这个组件,文档用了react,但是用vue是一样的,

首先在封装的播放器组件里引入

import 'videojs-landscape-fullscreen'

然后加上一段代码即可

this.player.landscapeFullscreen({fullscreen: {enterOnRotate: true,exitOnRotate: true,alwaysInLandscapeMode: true,iOS: true}
})

总结

其实就是用了两个库,并封装成了组件,直接把几个离线包和封装好的文件发给你,你直接用就行

本文标签: video