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;
      }
  • 相关阅读:
    HDU 1863 畅通工程(Kruskal)
    HDU 1879 继续畅通工程(Kruskra)
    HDU 1102 Constructing Roads(Kruskal)
    POJ 3150 Cellular Automaton(矩阵快速幂)
    POJ 3070 Fibonacci(矩阵快速幂)
    ZOJ 1648 Circuit Board(计算几何)
    ZOJ 3498 Javabeans
    ZOJ 3490 String Successor(模拟)
    Java实现 LeetCode 749 隔离病毒(DFS嵌套)
    Java实现 LeetCode 749 隔离病毒(DFS嵌套)
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11431560.html
Copyright © 2011-2022 走看看