标签：视频 vue vjs 50% height player mp4 video

npm i vue-video-player -D

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

<template>
  <div class="my-video">
    <TopBar title="video" />
    <van-swipe ref="goods_swipe" class="goods-swipe" v-for="(item,index) in videoList" :key="index">
      <van-swipe-item>
        <section class="video-title">
          怎么赚钱
        </section>
        <video-player class="goods-video" ref="videoPlayer" :options="videoList[index]"></video-player>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar';
export default {
  name: "video",
  components: {
    TopBar
  },
  data() {
    return {
      current: 0,// 0视频，!0图片
      playerOptions: {
        poster: '', //视频封面图
        sources: [{
          type: "video/mp4", //视频格式
          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' //视频地址
        }]
      },
      videoList: [
/*        {
          playerOptions: {
            playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
            autoplay: false, // 如果为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://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' //视频地址
            }],
            poster: '', // 封面地址
            notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true, // 当前时间和持续时间的分隔符
              durationDisplay: true, // 显示持续时间
              remainingTimeDisplay: false, // 是否显示剩余时间功能
              fullscreenToggle: true // 是否显示全屏按钮
            }
          }
        },*/
        {
          fluid: true,
          aspectRatio: '16:9',
          poster: '', //视频封面图
          sources: [{
            type: "video/mp4", //视频格式
            src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' //视频地址
          }]
        },
        {
          fluid: true,
          aspectRatio: '16:9',
          poster: '', //视频封面图
          sources: [{
            type: "video/mp4", //视频格式
            src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' //视频地址
          }]
        },
      ]
    }
  },
  methods: {
    onChange(index) {
      this.current = index; // index：0视频，！0图片
      this.player.pause(); // 滑动后暂停播放
    },
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
}
</script>


<style scoped lang="less">
.my-video {
  .video-title{
    text-align: center;
    padding:10px 0 8px;
    font-family: Alhyznht;
    color: #ccc;
  }
  .goods-swipe {
    position: relative;
    //height: 200px;
    width: 100%;
    background: #000;
    margin-top: 15px;
    .van-swipe{
      overflow: auto;
    }
    /deep/.van-swipe__track {
      .van-swipe-item {
        .van-image {
          height: 100%;
          width: 100%;
        }

        .goods-video {
          height: 100%;

          .video-js {
            width: 100%;
            height: 100%;
          }
          .vjs-tech{
            height: auto;
            //max-height: 200px;
          }

          .vjs-control-bar {
            bottom: 40px;
          }

          .vjs-big-play-button {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            line-height: normal;

            .vjs-icon-placeholder {
              &:before {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: auto;
                height: auto;
              }
            }
          }

          .vjs-control-bar {

            // opacity: 1 !important;
            .vjs-play-control,
            .vjs-fullscreen-control {
              .vjs-icon-placeholder {
                &:before {
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: auto;
                  height: auto;
                  font-size: 25px;
                }
              }
            }

            .vjs-volume-panel,
            .vjs-picture-in-picture-control {
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>

标签：视频,vue,vjs,50%,height,player,mp4,video
来源： https://www.cnblogs.com/anans/p/15960032.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。