vue-video-player的使用

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/