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
版权声明:本文标题:video 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1687233380a79255.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论