vue2.0+vue-video-player

时间：2024-12-20 07:02:49

开整

  • 安装依赖
npm install vue-video-player --save
  • 1
  • 引入样式
// 第一个是videoJs的样式，后一个是vue-video-player的样式，因为考虑到我其他业务组件可能也会用到视频播放，所以就放在了内
require('/dist/')
require('vue-video-player/src/')
  • 把VueVideoPlayer导入并挂在到vue上
//在内
import VideoPlayer from 'vue-video-player'
(VideoPlayer);
  • 编写业务组件 
<template>
  <div class="container">
    <div class="player">
      <video-player  class="video-player vjs-custom-skin"
                     ref="videoPlayer"
                     :playsinline="true"
                     :options="playerOptions"
                     @play="onPlayerPlay($event)"
                     @pause="onPlayerPause($event)"
      >
      </video-player>
    </div>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
export default {
  data () {
    return {
      playerOptions: {
//        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时， player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",
          src: "/big_buck_bunny.mp4" //你的视频地址（必填）
        }],
        poster: "", //你的封面地址
        width: ,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖无法播放媒体源时显示的默认信息。
//        controlBar: {
//          timeDivider: true,
//          durationDisplay: true,
//          remainingTimeDisplay: false,
//          fullscreenToggle: true  //全屏按钮
//        }
      }
    }
  },
  components: {
    videoPlayer
  },
  methods: {
    onPlayerPlay(player) {
      alert("play");
    },
    onPlayerPause(player){
      alert("pause");
    },
  },
  computed: {
    player() {
      return this.$
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
  .container {
    background-color: #efefef;
    min-height: 100%;
  }
</style>

注意： 
1. video-player标签的class必须设置成“video-player vjs-custom-skin”，你引入的样式才能起作用。我刚开始做时，直接拷贝的github页的代码，那个代码的class是video-player-box。 
2. 根据videoJS Api修改属性。我这里加了一些注释，可以参考。 
3. 修改src、poster属性为你的服务器资源地址。

  • 增加hls支持
//安装依赖
npm install --save videojs-contrib-hls

//在内引入
require('videojs-contrib-hls/dist/videojs-contrib-hls');
  • 启动服务，查看效果
npm run dev
  • 1

chrome手机尺寸效果

  • videoJs的播放按钮默认为椭圆形，我个人有点不习惯，所以修改成了圆形。

    1. 增加css样式
.video-js .vjs-big-play-button{
     /*
      播放按钮换成圆形
     */
    height: 2em;
    width: 2em;
    line-height: 2em;
    border-radius: 1em;
  }

注意： 
直接在 组件内增加样式会被覆盖，不论你有没有增加scoped属性，这取决于vue加载样式的顺序，之前查资料看了一个帖子，讲的很好，可惜找不着了。 
我最终的解决方案是：自定义了一个css文件，使用require引入到了内，放在上述样式引入之后。

require('/dist/');
require('vue-video-player/src/');
require('@/../static/css/');

大bug: 播放按钮与fastclick冲突

冲突是这样的：播放器在手机浏览器或者chrome开发者工具（手机尺寸）内，点击播放按钮，播放与暂停事件会被触发多次。

刚开始不知道什么原因，在github上提了个issure，刚提完就发现上一个关闭的issure解决的就是这个问题，这里得向作者道个歉，给您添堵了。哈哈。于是我看了另外一个人给的答案：与fastclick插件冲突……，但是….. 没有解决方案。然后我尝试注释掉了fastclick，果然是它影响的。

然后我去fastclick github 地址看了看 ,页面说的很清楚，只要在触发的元素上增加一个needsclick的class就可以了。

但是我试了好久都没有成功。这时候看到了神贴，大体浏览了一下fastclick的源码过程，并且作者提到“Fastclick 把 放到了 ontouchEnd 末尾去执行，才导致前面说的加上了“needsclick”类名也无效的问题。”所以我想尝试修改fastclick的源码，并且验证一下。

  • 我把整个拷贝了出来，并采用require的方式引用。
const FastClick = require('@/../static/js/');
();
  • 打开代码，猜想为什么needsclick没有起到作用，所以就直接检索了一下这个单词，在 方法的最后,有一个验证：
return (/\bneedsclick\b/).test();

  • 首先方法是判断元素是否要保留穿透功能，而最后一行肯定是验证触发的元素的class是不是含有needsclick。所以我先猜测是不是我触发的元素没有加上class,所以console了： 
    这里写图片描述

  • 果然没有，并且发现一个规律，我需要控制的按钮都是以vjs开头的，所以，在验证上再增加一个验证。

return ((/\bneedsclick\b/).test() || (/\bvjs/).test());
  • 问题解决，当然解决问题的方式暴力了一些，所以这里我希望看到并觉得此帖有帮助的同学能够在此基础上继续补充完善。我就先趟到这。

最后

  • 贴个版本
    "fastclick": "^1.0.6",
    "videojs-contrib-hls": "^5.12.2",
    "vue": "^2.2.2",
    "vue-router": "^2.2.0",
    "vue-video-player": "^4.0.6",

相关文章