vue-video-player的使用
页面加载自动全屏化的方法
methods:{
// 定义点击播放按钮,自动全屏化的方法
full (e) {
// 做兼容处理
if (e.requestFullscreen) {
e.requestFullscreen()
} else if (e.mozRequestFullScreen) {
e.mozRequestFullScreen()
} else if (e.msRequestFullscreen) {
e.msRequestFullscreen()
} else if (e.oRequestFullscreen) {
e.oRequestFullscreen()
} else if (e.webkitRequestFullscreen) {
e.webkitRequestFullScreen()
} else {
// var docHtml = document.documentElement;
// var docBody = document.body;
var videobox = document.getElementsByClassName('video-player')
var cssText = 'width:100%;height:100%;overflow:hidden;'
// docHtml.style.cssText = cssText;
// docBody.style.cssText = cssText;
videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
document.IsFullScreen = true
}
},
// 定义点击播放按钮,调用全屏化的方法
onPlayerPlay (player) {
// console.log('player play===>>>', player)
this.full(player)
},
}
用到了一个视频播放插件,直接上代码了
//css
<video-player
ref="videoplayer"
:playsinline="true"
@play="onPlayerPlay($event)"
:options="playerOptions"
>
</video-player>
// script
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
components: {
videoPlayer
},
data () {
return {
show: false,
params: {
// open_id: this.id,
// access_token: this.baba,
Content_Type: 'video/mp4',
video: Ajson
},
baba: 'woshibaba',
id: 'woshiid',
video_id: '',
playerOptions: {
autoplay: true, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
type: 'video/mp4', // 类型
src: 'http://file.wojiuburangnikan.com/wojiuburangnikan.mp4' // url地址
}
],
poster: 'http://file.wojiuburangnikan.com/wojiuburangnikan.jpg', // 封面地址
notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
}
}
},
}
//style 这个没啥说的,主要让播放按钮垂直水平居中就行了
<style scoped lang="scss">
video-player {
height: 100%;
// width:100%;
// width:33.3%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
<style>
关于vue-video-player的使用 https://blog.csdn.net/dx01259/article/details/105723063/