zoukankan      html  css  js  c++  java
  • 利用vue-video-player插件自定义制作视频功能

    • 安装依赖
      cnpm install vue-video-player --save

    引入样式
    // 第一个是videoJs的样式,后一个是vue-video-player的样式,因为考虑到我其他业务组件可能也会用到视频播放,所以就放在了main.js内

    require('vue-video-player/node_modules/video.js/dist/video-js.css')
    require('vue-video-player/src/custom-theme.css')

    在main.js中

    //引入视频播放插件
    import VideoPlayer from 'vue-video-player'
    require('vue-video-player/node_modules/video.js/dist/video-js.css')
    require('vue-video-player/src/custom-theme.css')
    Vue.use(VideoPlayer)
     
    在组件中使用video-player标签
      <video-player class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)">
      </video-player>
     
     
     
    script中使用
      data() {
        return {
          playerOptions: {  
            controls: true, // 是否显示控制栏
            playbackRates: [0.7, 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: "poster.jpg", //你的封面地址
             document.documentElement.clientWidth,
            notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true,//当前时间和持续时间的分隔符
              durationDisplay: true,//显示持续时间
              remainingTimeDisplay: false,//是否显示剩余时间功能
              fullscreenToggle: true //全屏按钮
            }
          },
        }
      },
      methods: {
        //开始播放
        onPlayerPlay(player) {
          alert({str:"play",type:"success"})
        },
        //暂停播放
        onPlayerPause(player){
          alert({str:"pause",type:"success"})
        },
      },
     
     
     
    style中
      .video-player,.video-player,.vjs-custom-skin{
         50%;
        height: 50%;
        display: block;
        margin: 0 auto;
      }
  • 相关阅读:
    hdu4578 (多标记线段树)
    hdu4757 (可持久化字典树+LCA)
    CF940F Machine Learning (带修改莫队)
    csps模拟测试7576一句话题解
    csps模拟测试74梦境,玩具,飘雪圣域题解
    csps模拟测试7273简单的操作小P的2048小P的单调数列小P的生成树
    csps模拟测试707172部分题解myc
    莫队算法学习
    csps模拟69chess,array,70木板,打扫卫生题解
    csps模拟68d,e,f题解
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11431560.html
Copyright © 2011-2022 走看看