• vue 视频播放Vue-Video-Player


    官网地址:https://www.npmjs.com/package/vue-video-player

    1.输入命令:

         npm install vue-video-player --save

                      npm install --save videojs-contrib-hls

    2.全局引入--main.js:

        import VideoPlayer from 'vue-video-player'
        import 'video.js/dist/video-js.css'
        Vue.use(VideoPlayer)
    3.页面对应的template文件:(想要引入的css有效,class名不能变)
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"    
            @play="androidPlay($event)"     //暂停视频事件
      :options="playerOptions" ></video-player>
    4.页面对应的script文件:
      import "video.js/dist/video-js.css";
      import "vue-video-player/src/custom-theme.css";
      import "videojs-contrib-hls";
      
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        controls: true, //控制条
        preload: "auto", //视频预加载
        muted: false, //默认情况下将会消除任何音频。
        loop: false, //导致视频一结束就重新开始。
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          }
        ],
        poster:
        "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
         document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。   
        controlBar: {
          timeDivider: true,
                 durationDisplay: true,
                         remainingTimeDisplay: false,
                        fullscreenToggle: false //全屏按钮是否显示
                 }
      },
     
         5.暂停视频事件(如果无关,可以略过)
     androidPlay(player) {
           this.currentPlay = player.el_.children[0];
        },
     在想要暂停视频的方法中
      if (this.currentPlay) {
              this.currentPlay.pause();
       }
     
  • 相关阅读:
    PHP设计模式
    PHP 面向对象
    MYSQL 覆盖索引
    MYSQL IOPS、QPS、TPS
    MySQL 事务嵌套
    MySQL 慢查询优化
    MySQL 查询状态
    MySQL 乐观锁和悲观锁
    MySQL 分库、分表
    Spring Boot 全局异常捕捉,自定义异常并统一返回
  • 原文地址:https://www.cnblogs.com/mcll/p/11393552.html
Copyright © 2020-2023  润新知