├── .gitignore
├── README.md
├── babel.config.js
├── mp4_hls_rtmp.png
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── 01-video.vue
        ├── 03-video.vue
        ├── 05-video.vue
        └── video-player
        │   ├── custom-theme.css
        │   ├── index.js
        │   ├── player.vue
        │   └── ssr.js
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # videotest
 2 | 
 3 | ### 效果图
 4 | ![mp4_hls_rtmp.png](./mp4_hls_rtmp.png)
 5 | 
 6 | ## Project setup
 7 | ```
 8 | npm install
 9 | ```
10 | 
11 | ### Compiles and hot-reloads for development
12 | ```
13 | npm run serve
14 | ```
15 | 
16 | ### Compiles and minifies for production
17 | ```
18 | npm run build
19 | ```
20 | 
21 | ### Run your tests
22 | ```
23 | npm run test
24 | ```
25 | 
26 | ### Lints and fixes files
27 | ```
28 | npm run lint
29 | ```
30 | 
31 | ### Customize configuration
32 | See [Configuration Reference](https://cli.vuejs.org/config/).
33 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/mp4_hls_rtmp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeromexiong/vue-video-demo/0b7fb379dd4eb8dd4d3d06f685b729d651b922a6/mp4_hls_rtmp.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "videotest",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^2.6.5",
12 |     "video.js": "^7.6.0",
13 |     "videojs-flash": "^2.2.0",
14 |     "videojs-hotkeys": "^0.2.25",
15 |     "vue": "^2.6.10"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.10.0",
19 |     "@vue/cli-plugin-eslint": "^3.10.0",
20 |     "@vue/cli-service": "^3.10.0",
21 |     "babel-eslint": "^10.0.1",
22 |     "eslint": "^5.16.0",
23 |     "eslint-plugin-vue": "^5.0.0",
24 |     "vue-template-compiler": "^2.6.10"
25 |   },
26 |   "eslintConfig": {
27 |     "root": true,
28 |     "env": {
29 |       "node": true
30 |     },
31 |     "extends": [
32 |       "plugin:vue/essential",
33 |       "eslint:recommended"
34 |     ],
35 |     "rules": {},
36 |     "parserOptions": {
37 |       "parser": "babel-eslint"
38 |     }
39 |   },
40 |   "postcss": {
41 |     "plugins": {
42 |       "autoprefixer": {}
43 |     }
44 |   },
45 |   "browserslist": [
46 |     "> 1%",
47 |     "last 2 versions"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeromexiong/vue-video-demo/0b7fb379dd4eb8dd4d3d06f685b729d651b922a6/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>videotest</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but videotest doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
 4 |     <video1 />
 5 |     <video3 />
 6 |     <video5 />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import video1 from './components/01-video.vue'
12 | import video3 from './components/03-video.vue'
13 | import video5 from './components/05-video.vue'
14 | 
15 | export default {
16 |   name: 'app',
17 |   components: {
18 |     video1,
19 |     video3,
20 |     video5,
21 |   }
22 | }
23 | </script>
24 | 
25 | <style>
26 | #app {
27 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
28 |   -webkit-font-smoothing: antialiased;
29 |   -moz-osx-font-smoothing: grayscale;
30 |   text-align: center;
31 |   color: #2c3e50;
32 |   margin-top: 60px;
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeromexiong/vue-video-demo/0b7fb379dd4eb8dd4d3d06f685b729d651b922a6/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/01-video.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="player">
  3 |     <div class="md-subhead">
  4 |       <span>basic mp4</span>
  5 |     </div>
  6 |     <video-player
  7 |       class="vjs-custom-skin"
  8 |       ref="videoPlayer"
  9 |       :options="playerOptions"
 10 |       :playsinline="true"
 11 |       @play="onPlayerPlay($event)"
 12 |       @pause="onPlayerPause($event)"
 13 |       @ended="onPlayerEnded($event)"
 14 |       @loadeddata="onPlayerLoadeddata($event)"
 15 |       @waiting="onPlayerWaiting($event)"
 16 |       @playing="onPlayerPlaying($event)"
 17 |       @timeupdate="onPlayerTimeupdate($event)"
 18 |       @canplay="onPlayerCanplay($event)"
 19 |       @canplaythrough="onPlayerCanplaythrough($event)"
 20 |       @ready="playerReadied"
 21 |       @statechanged="playerStateChanged($event)"
 22 |     ></video-player>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | export default {
 28 |   data() {
 29 |     return {
 30 |       // videojs options
 31 |       playerOptions: {
 32 |         height: "360",
 33 |         autoplay: true,
 34 |         muted: true,
 35 |         language: "en",
 36 |         playbackRates: [0.7, 1.0, 1.5, 2.0],
 37 |         // sources: [{
 38 |         //   type: "video/mp4",
 39 |         //   // mp4
 40 |         //   src: "http://vjs.zencdn.net/v/oceans.mp4",
 41 |         //   // webm
 42 |         //   // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
 43 |         // }],
 44 |         sources: [
 45 |           {
 46 |             type: "video/mp4",
 47 |             src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
 48 |           }
 49 |         ],
 50 |         poster:
 51 |           "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg"
 52 |       }
 53 |     };
 54 |   },
 55 |   mounted() {
 56 |     // console.log('this is current player instance object', this.player)
 57 |     setTimeout(() => {
 58 |       console.log("dynamic change options", this.player);
 59 | 
 60 |       // change src
 61 |       // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
 62 | 
 63 |       // change item
 64 |       // this.$set(this.playerOptions.sources, 0, {
 65 |       //   type: "video/mp4",
 66 |       //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
 67 |       // })
 68 | 
 69 |       // change array
 70 |       // this.playerOptions.sources = [{
 71 |       //   type: "video/mp4",
 72 |       //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
 73 |       // }]
 74 |       this.player.muted(false);
 75 |     }, 5000);
 76 |   },
 77 |   computed: {
 78 |     player() {
 79 |       return this.$refs.videoPlayer.player;
 80 |     }
 81 |   },
 82 |   methods: {
 83 |     // listen event
 84 |     onPlayerPlay(player) {
 85 |       // console.log('player play!', player)
 86 |     },
 87 |     onPlayerPause(player) {
 88 |       // console.log('player pause!', player)
 89 |     },
 90 |     onPlayerEnded(player) {
 91 |       // console.log('player ended!', player)
 92 |     },
 93 |     onPlayerLoadeddata(player) {
 94 |       // console.log('player Loadeddata!', player)
 95 |     },
 96 |     onPlayerWaiting(player) {
 97 |       // console.log('player Waiting!', player)
 98 |     },
 99 |     onPlayerPlaying(player) {
100 |       // console.log('player Playing!', player)
101 |     },
102 |     onPlayerTimeupdate(player) {
103 |       // console.log('player Timeupdate!', player.currentTime())
104 |     },
105 |     onPlayerCanplay(player) {
106 |       // console.log('player Canplay!', player)
107 |     },
108 |     onPlayerCanplaythrough(player) {
109 |       // console.log('player Canplaythrough!', player)
110 |     },
111 | 
112 |     // or listen state event
113 |     playerStateChanged(playerCurrentState) {
114 |       // console.log('player current update state', playerCurrentState)
115 |     },
116 | 
117 |     // player is ready
118 |     playerReadied(player) {
119 |       // seek to 10s
120 |       console.log("example player 1 readied", player);
121 |       player.currentTime(10);
122 |       // console.log('example 01: the player is readied', player)
123 |     }
124 |   }
125 | };
126 | </script>
127 | <style></style>
128 | 


--------------------------------------------------------------------------------
/src/components/03-video.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="player">
 3 |     <div class="md-subhead">
 4 |       <span>AudioTrack && playsinline / 音轨 及 移动端不全屏 hls</span>
 5 |     </div>
 6 |     <video-player
 7 |       class="vjs-custom-skin"
 8 |       :options="playerOptions"
 9 |       :playsinline="true"
10 |       @ready="playerReadied($event)"
11 |     ></video-player>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | // videojs
17 | import videojs from "video.js";
18 | 
19 | // export
20 | export default {
21 |   data() {
22 |     return {
23 |       playerOptions: {
24 |         height: "360",
25 |         autoplay: true,
26 |         playbackRates: [0.7, 1, 1.3, 1.5, 1.7],
27 |         sources: [
28 |           {
29 |             type: "application/x-mpegURL",
30 |             src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" //你的m3u8地址（必填）
31 |           }
32 |         ],
33 |         poster:
34 |           "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-3.jpg"
35 |       }
36 |     };
37 |   },
38 |   methods: {
39 |     playerReadied(player) {
40 |       const track = new videojs.AudioTrack({
41 |         id: "my-spanish-audio-track",
42 |         kind: "translation",
43 |         label: "Spanish",
44 |         language: "es"
45 |       });
46 |       player.audioTracks().addTrack(track);
47 |       // Get the current player's AudioTrackList object.
48 |       const audioTrackList = player.audioTracks();
49 | 
50 |       // Listen to the "change" event.
51 |       audioTrackList.addEventListener("change", function() {
52 |         // Log the currently enabled AudioTrack label.
53 |         for (let i = 0; i < audioTrackList.length; i++) {
54 |           const track = audioTrackList[i];
55 |           if (track.enabled) {
56 |             videojs.log(track.label);
57 |             return;
58 |           }
59 |         }
60 |       });
61 |     }
62 |   }
63 | };
64 | </script>
65 | 


--------------------------------------------------------------------------------
/src/components/05-video.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="player">
 3 |     <div class="md-subhead">
 4 |       <span>{{isRTMP ? 'rtmp' : 'flv'}}流播放 & 自定义hotkeys</span>
 5 |       <button @click="switchSource">切换</button>
 6 |     </div>
 7 |     <video-player
 8 |       playsinline
 9 |       class="vjs-custom-skin"
10 |       :options="playerOptions"
11 |       customEventName="changed"
12 |       @ready="playerIsReady"
13 |       @changed="playerStateChanged($event)"
14 |     ></video-player>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import "videojs-flash";
20 | import "videojs-hotkeys";
21 | export default {
22 |   data() {
23 |     return {
24 |       isRTMP: true,
25 |       playerOptions: {
26 |         //playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
27 |         autoplay: true, //如果true,浏览器准备好时开始回放。
28 |         muted: false, // 默认情况下将会消除任何音频。
29 |         loop: false, // 导致视频一结束就重新开始。
30 |         preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
31 |         language: "zh-CN",
32 |         aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
33 |         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
34 |         // sources: [{
35 |         //     type: "application/x-mpegURL",
36 |         //     src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" //你的m3u8地址（必填）
37 |         // }],
38 |         sources: [
39 |           {
40 |             type: "rtmp/mp4",
41 |             src: "rtmp://58.200.131.2:1935/livetv/hunantv",
42 |           },
43 |         ],
44 |         techOrder: ["flash", "html5"],
45 |         // poster: "poster.jpg", //你的封面地址
46 |         width: document.documentElement.clientWidth,
47 |         notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
48 |         // controlBar: {
49 |         //   timeDivider: true,
50 |         //   durationDisplay: true,
51 |         //   remainingTimeDisplay: false,
52 |         //   fullscreenToggle: true, //全屏按钮
53 |         // },
54 |       },
55 |     };
56 |   },
57 |   methods: {
58 |     playerStateChanged(playerCurrentState) {
59 |       console.log("example 5: state changed", playerCurrentState);
60 |     },
61 |     playerIsReady(player) {
62 |       console.log("example 5 ready!", player);
63 |       player.hotkeys({
64 |         volumeStep: 0.1,
65 |         seekStep: 5,
66 |         enableModifiersForNumbers: false,
67 |         fullscreenKey: function (event, player) {
68 |           // override fullscreen to trigger when pressing the F key or Ctrl+Enter
69 |           return event.which === 70 || (event.ctrlKey && event.which === 13);
70 |         },
71 |       });
72 |     },
73 |     switchSource() {
74 |       this.isRTMP = !this.isRTMP;
75 |       this.playerOptions.sources = this.isRTMP
76 |         ? [
77 |             {
78 |               type: "rtmp/mp4",
79 |               src: "rtmp://58.200.131.2:1935/livetv/hunantv",
80 |             },
81 |           ]
82 |         : [
83 |             {
84 |               type: "video/x-flv",
85 |               src: "http://img.ksbbs.com/asset/Mon_1704/15868902d399b87.flv",
86 |             },
87 |           ];
88 |     },
89 |   },
90 | };
91 | </script>
92 | 
93 | 


--------------------------------------------------------------------------------
/src/components/video-player/custom-theme.css:
--------------------------------------------------------------------------------
  1 | .vjs-custom-skin > .video-js {
  2 |   width: 100%;
  3 |   font-family: "PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei","微软雅黑",sans-serif;
  4 | }
  5 | 
  6 | .vjs-custom-skin > .video-js .vjs-menu-button-inline.vjs-slider-active,.vjs-custom-skin > .video-js .vjs-menu-button-inline:focus,.vjs-custom-skin > .video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
  7 |   width: 10em
  8 | }
  9 | 
 10 | .vjs-custom-skin > .video-js .vjs-controls-disabled .vjs-big-play-button {
 11 |   display: none!important
 12 | }
 13 | 
 14 | .vjs-custom-skin > .video-js .vjs-control {
 15 |   width: 3em
 16 | }
 17 | 
 18 | .vjs-custom-skin > .video-js .vjs-control.vjs-live-control{
 19 |   width: auto;
 20 |   padding-left: .5em;
 21 |   letter-spacing: .1em;
 22 | }
 23 | 
 24 | .vjs-custom-skin > .video-js .vjs-menu-button-inline:before {
 25 |   width: 1.5em
 26 | }
 27 | 
 28 | .vjs-menu-button-inline .vjs-menu {
 29 |   left: 3em
 30 | }
 31 | 
 32 | .vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button {
 33 |   display: block
 34 | }
 35 | 
 36 | .vjs-custom-skin > .video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button {
 37 |   display: none!important
 38 | }
 39 | 
 40 | .vjs-custom-skin > .video-js .vjs-mouse-display:after,.vjs-custom-skin > .video-js .vjs-play-progress:after {
 41 |   padding: 0 .4em .3em
 42 | }
 43 | 
 44 | .video-js.vjs-ended .vjs-loading-spinner {
 45 |   display: none;
 46 | }
 47 | 
 48 | .video-js.vjs-ended .vjs-big-play-button {
 49 |   display: block !important;
 50 | }
 51 | 
 52 | .video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button {
 53 |   display: block
 54 | }
 55 | 
 56 | .vjs-custom-skin > .video-js .vjs-big-play-button {
 57 |   top: 50%;
 58 |   left: 50%;
 59 |   margin-left: -1.5em;
 60 |   margin-top: -1em
 61 | }
 62 | 
 63 | .vjs-custom-skin > .video-js .vjs-big-play-button {
 64 |   background-color: rgba(0,0,0,0.45);
 65 |   font-size: 3.5em;
 66 |    /*border-radius: 50%;*/
 67 |   height: 2em !important;
 68 |   line-height: 2em !important;
 69 |   margin-top: -1em !important
 70 | }
 71 | 
 72 | .video-js:hover .vjs-big-play-button,.vjs-custom-skin > .video-js .vjs-big-play-button:focus,.vjs-custom-skin > .video-js .vjs-big-play-button:active {
 73 |   background-color: rgba(36,131,213,0.9)
 74 | }
 75 | 
 76 | .vjs-custom-skin > .video-js .vjs-loading-spinner {
 77 |   border-color: rgba(36,131,213,0.8)
 78 | }
 79 | 
 80 | .vjs-custom-skin > .video-js .vjs-control-bar2 {
 81 |   background-color: #000000
 82 | }
 83 | 
 84 | .vjs-custom-skin > .video-js .vjs-control-bar {
 85 |    /*background-color: rgba(0,0,0,0.3) !important;*/
 86 |   color: #ffffff;
 87 |   font-size: 14px
 88 | }
 89 | 
 90 | .vjs-custom-skin > .video-js .vjs-play-progress,.vjs-custom-skin > .video-js  .vjs-volume-level {
 91 |   background-color: #2483d5
 92 | }
 93 | 
 94 | .vjs-custom-skin > .video-js .vjs-play-progress:before {
 95 |   top: -0.3em;
 96 | }
 97 | 
 98 | .vjs-custom-skin > .video-js .vjs-progress-control:hover .vjs-progress-holder {
 99 |   font-size: 1.3em;
100 | }
101 | 
102 | .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
103 |   left: 0em;
104 | }
105 | 
106 | .vjs-custom-skin > .video-js .vjs-menu li {
107 |   padding: 0;
108 |   line-height: 2em;
109 |   font-size: 1.1em;
110 |   font-family: "PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei","微软雅黑",sans-serif;
111 | }
112 | 
113 | .vjs-custom-skin > .video-js .vjs-time-tooltip,
114 | .vjs-custom-skin > .video-js .vjs-mouse-display:after, 
115 | .vjs-custom-skin > .video-js .vjs-play-progress:after {
116 |   border-radius: 0;
117 |   font-size: 1em;
118 |   padding: 0;
119 |   width: 3em;
120 |   height: 1.5em;
121 |   line-height: 1.5em;
122 |   top: -3em;
123 | }
124 | 
125 | .vjs-custom-skin > .video-js .vjs-menu-button-popup .vjs-menu {
126 |   width: 5em;
127 |   left: -1em;
128 | }
129 | 
130 | .vjs-custom-skin > .video-js .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
131 |   left: 0;
132 | }
133 | 
134 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-resolution-button .vjs-menu {
135 |    /*order: 4;*/
136 | }
137 | 
138 |  /*排序顺序*/
139 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control {
140 |   order: 0;
141 | }
142 | 
143 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-control {
144 |   min-width: 1em;
145 |   padding: 0;
146 |   margin: 0 .1em;
147 |   text-align: center;
148 |   display: block;
149 |   order: 1;
150 | }
151 | 
152 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-playback-rate .vjs-playback-rate-value{
153 |   font-size: 1.2em;
154 |   line-height: 2.4;
155 | }
156 | 
157 | .vjs-custom-skin > .video-js .vjs-progress-control.vjs-control {
158 |   order: 2;
159 | }
160 | 
161 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-volume-menu-button {
162 |   order: 3;
163 | }
164 | 
165 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-resolution-button {
166 |   order: 4;
167 | }
168 | 
169 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-resolution-button .vjs-resolution-button-label {
170 |   display: block;
171 |   line-height: 3em;
172 | }
173 | 
174 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-playback-rate {
175 |   order: 5;
176 | }
177 | 
178 | .vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control {
179 |   order: 6;
180 | }
181 | 


--------------------------------------------------------------------------------
/src/components/video-player/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /*
 3 | * Vue-Video-Player ssr.js
 4 | * Author: surmon@foxmail.com
 5 | * Github: https://github.com/surmon-china/vue-video-player
 6 | * Adapted from Videojs (https://github.com/videojs/video.js)
 7 | */
 8 | 
 9 | import _videojs from 'video.js'
10 | import videoPlayer from './player.vue'
11 | 
12 | const videojs = window.videojs || _videojs
13 | const install = function (Vue, config) {
14 |   if (config) {
15 |     if (config.options) {
16 |       videoPlayer.props.globalOptions.default = () => config.options
17 |     }
18 |     if (config.events) {
19 |       videoPlayer.props.globalEvents.default = () => config.events
20 |     }
21 |   }
22 |   Vue.component(videoPlayer.name, videoPlayer)
23 | }
24 | 
25 | const VueVideoPlayer = { videojs, videoPlayer, install }
26 | 
27 | export default VueVideoPlayer
28 | export { videojs, videoPlayer, install }
29 | /**
30 |  * npm install -S video.js
31 |  * rtmp: npm install -S videojs-flash
32 |  */


--------------------------------------------------------------------------------
/src/components/video-player/player.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="video-player" v-if="reseted">
  3 |     <video class="video-js" ref="video"></video>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 |   // lib
  9 |   import _videojs from 'video.js'
 10 |   const videojs = window.videojs || _videojs
 11 | 
 12 |   // pollfill
 13 |   if (typeof Object.assign != 'function') {
 14 |     Object.defineProperty(Object, 'assign', {
 15 |       value(target, varArgs) {
 16 |         if (target == null) {
 17 |           throw new TypeError('Cannot convert undefined or null to object')
 18 |         }
 19 |         const to = Object(target)
 20 |         for (let index = 1; index < arguments.length; index++) {
 21 |           const nextSource = arguments[index]
 22 |           if (nextSource != null) {
 23 |             for (const nextKey in nextSource) {
 24 |               if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
 25 |                 to[nextKey] = nextSource[nextKey]
 26 |               }
 27 |             }
 28 |           }
 29 |         }
 30 |         return to
 31 |       },
 32 |       writable: true,
 33 |       configurable: true
 34 |     })
 35 |   }
 36 | 
 37 |   // as of videojs 6.6.0
 38 |   const DEFAULT_EVENTS = [
 39 |     'loadeddata',
 40 |     'canplay',
 41 |     'canplaythrough',
 42 |     'play',
 43 |     'pause',
 44 |     'waiting',
 45 |     'playing',
 46 |     'ended',
 47 |     'error'
 48 |   ]
 49 | 
 50 |   // export
 51 |   export default {
 52 |     name: 'video-player',
 53 |     props: {
 54 |       start: {
 55 |         type: Number,
 56 |         default: 0
 57 |       },
 58 |       crossOrigin: {
 59 |         type: String,
 60 |         default: ''
 61 |       },
 62 |       playsinline: {
 63 |         type: Boolean,
 64 |         default: false
 65 |       },
 66 |       customEventName: {
 67 |         type: String,
 68 |         default: 'statechanged'
 69 |       },
 70 |       options: {
 71 |         type: Object,
 72 |         required: true
 73 |       },
 74 |       events: {
 75 |         type: Array,
 76 |         default: () => []
 77 |       },
 78 |       globalOptions: {
 79 |         type: Object,
 80 |         default: () => ({
 81 |           // autoplay: false,
 82 |           controls: true,
 83 |           // preload: 'auto',
 84 |           // fluid: false,
 85 |           // muted: false,
 86 |           controlBar: {
 87 |             remainingTimeDisplay: false,
 88 |             playToggle: {},
 89 |             progressControl: {},
 90 |             fullscreenToggle: {},
 91 |             volumeMenuButton: {
 92 |               inline: false,
 93 |               vertical: true
 94 |             }
 95 |           },
 96 |           techOrder: ['html5'],
 97 |           plugins: {}
 98 |         })
 99 |       },
100 |       globalEvents: {
101 |         type: Array,
102 |         default: () => []
103 |       }
104 |     },
105 |     data() {
106 |       return {
107 |         player: null,
108 |         reseted: true
109 |       }
110 |     },
111 |     mounted() {
112 |       if (!this.player) { 
113 |         this.initialize()
114 |       }
115 |     },
116 |     beforeDestroy() {
117 |       if (this.player) { 
118 |         this.dispose()
119 |       }
120 |     },
121 |     methods: {
122 |       initialize() {
123 | 
124 |         // videojs options
125 |         const videoOptions = Object.assign({}, this.globalOptions, this.options)
126 | 
127 |         // ios fullscreen
128 |         if (this.playsinline) {
129 |           this.$refs.video.setAttribute('playsinline', this.playsinline)
130 |           this.$refs.video.setAttribute('webkit-playsinline', this.playsinline)
131 |           this.$refs.video.setAttribute('x5-playsinline', this.playsinline)
132 |           this.$refs.video.setAttribute('x5-video-player-type', 'h5')
133 |           this.$refs.video.setAttribute('x5-video-player-fullscreen', false)
134 |         }
135 | 
136 |         // cross origin
137 |         if (this.crossOrigin !== '') {
138 |           this.$refs.video.crossOrigin = this.crossOrigin
139 |           this.$refs.video.setAttribute('crossOrigin', this.crossOrigin)
140 |         }
141 | 
142 |         // emit event
143 |         const emitPlayerState = (event, value) => {
144 |           if (event) {
145 |             this.$emit(event, this.player)
146 |           }
147 |           if (value) {
148 |             this.$emit(this.customEventName, { [event]: value })
149 |           }
150 |         }
151 | 
152 |         // avoid error "VIDEOJS: ERROR: Unable to find plugin: __ob__"
153 |         if (videoOptions.plugins) {
154 |           delete videoOptions.plugins.__ob__
155 |         }
156 | 
157 |         // videoOptions
158 |         // console.log('videoOptions', videoOptions)
159 |         
160 |         // player
161 |         const self = this
162 |         this.player = videojs(this.$refs.video, videoOptions, function() {
163 | 
164 |           // events
165 |           const events = DEFAULT_EVENTS.concat(self.events).concat(self.globalEvents)
166 | 
167 |           // watch events
168 |           const onEdEvents = {}
169 |           for (let i = 0; i < events.length; i++) {
170 |             if (typeof events[i] === 'string' && onEdEvents[events[i]] === undefined) {
171 |               (event => {
172 |                 onEdEvents[event] = null
173 |                 this.on(event, () => {
174 |                   emitPlayerState(event, true)
175 |                 })
176 |               })(events[i])
177 |             }
178 |           }
179 | 
180 |           // watch timeupdate
181 |           this.on('timeupdate', function() {
182 |             emitPlayerState('timeupdate', this.currentTime())
183 |           })
184 | 
185 |           // player readied
186 |           self.$emit('ready', this)
187 |         })
188 |       },
189 |       dispose(callback) {
190 |         if (this.player && this.player.dispose) {
191 |           if (this.player.techName_ !== 'Flash') {
192 |             this.player.pause && this.player.pause()
193 |           }
194 |           this.player.dispose()
195 |           this.player = null
196 |           this.$nextTick(() => {
197 |             this.reseted = false
198 |             this.$nextTick(() => {
199 |               this.reseted = true
200 |               this.$nextTick(() => {
201 |                 callback && callback()
202 |               })
203 |             })
204 |           })
205 |           /*
206 |           if (!this.$el.children.length) {
207 |             const video = document.createElement('video')
208 |             video.className = 'video-js'
209 |             this.$el.appendChild(video)
210 |           }
211 |           */
212 |         }
213 |       }
214 |     },
215 |     watch: {
216 |       options: {
217 |         deep: true,
218 |         handler(options, oldOptions) {
219 |           this.dispose(() => {
220 |             if (options && options.sources && options.sources.length) {
221 |               this.initialize()
222 |             }
223 |           })
224 |         }
225 |       }
226 |     }
227 |   }
228 | </script>
229 | 


--------------------------------------------------------------------------------
/src/components/video-player/ssr.js:
--------------------------------------------------------------------------------
  1 | 
  2 | /*
  3 | * VueVideoPlayer ssr.js
  4 | * Author: surmon@foxmail.com
  5 | * Github: https://github.com/surmon-china/vue-video-player
  6 | */
  7 | 
  8 | // Require sources
  9 | import videojs from 'video.js'
 10 | import objectAssign from 'object-assign'
 11 | 
 12 | // as of videojs 6.6.0
 13 | const DEFAULT_EVENTS = [
 14 |   'loadeddata',
 15 |   'canplay',
 16 |   'canplaythrough',
 17 |   'play',
 18 |   'pause',
 19 |   'waiting',
 20 |   'playing',
 21 |   'ended',
 22 |   'error'
 23 | ]
 24 | 
 25 | const videoPlayerDirective = globalOptions => {
 26 | 
 27 |   // globalOptions
 28 |   globalOptions.events = globalOptions.events || []
 29 |   globalOptions.options = globalOptions.options || {}
 30 | 
 31 |   // Get videojs instace name in directive
 32 |   const getInstanceName = (el, binding, vnode) => {
 33 |     let instanceName = null
 34 |     if (binding.arg) {
 35 |       instanceName = binding.arg
 36 |     } else if (vnode.data.attrs && (vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'])) {
 37 |       instanceName = (vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'])
 38 |     } else if (el.id) {
 39 |       instanceName = el.id
 40 |     }
 41 |     return instanceName || 'player'
 42 |   }
 43 | 
 44 |   // dom
 45 |   const repairDom = el => {
 46 |     if (!el.children.length) {
 47 |       const video = document.createElement('video')
 48 |       video.className = 'video-js'
 49 |       el.appendChild(video)
 50 |     }
 51 |   }
 52 | 
 53 |   // init
 54 |   const initPlayer = (el, binding, vnode) => {
 55 | 
 56 |     const self = vnode.context
 57 |     const attrs = vnode.data.attrs || {}
 58 |     const options = binding.value || {}
 59 |     const instanceName = getInstanceName(el, binding, vnode)
 60 |     const customEventName = attrs.customEventName || 'statechanged'
 61 |     let player = self[instanceName]
 62 | 
 63 |     // options
 64 |     const componentEvents = attrs.events || []
 65 |     const playsinline = attrs.playsinline || false
 66 | 
 67 |     // ios fullscreen
 68 |     if (playsinline) {
 69 |       el.children[0].setAttribute('playsinline', playsinline)
 70 |       el.children[0].setAttribute('webkit-playsinline', playsinline)
 71 |       el.children[0].setAttribute('x5-playsinline', playsinline)
 72 |       el.children[0].setAttribute('x5-video-player-type', 'h5')
 73 |       el.children[0].setAttribute('x5-video-player-fullscreen', false)
 74 |     }
 75 | 
 76 |     // cross origin
 77 |     if (attrs.crossOrigin) {
 78 |       el.children[0].crossOrigin = attrs.crossOrigin
 79 |       el.children[0].setAttribute('crossOrigin', attrs.crossOrigin)
 80 |     }
 81 | 
 82 |     // initialize
 83 |     if (!player) {
 84 | 
 85 |       // videoOptions
 86 |       const videoOptions = objectAssign({}, {
 87 |         controls: true,
 88 |         controlBar: {
 89 |           remainingTimeDisplay: false,
 90 |           playToggle: {},
 91 |           progressControl: {},
 92 |           fullscreenToggle: {},
 93 |           volumeMenuButton: {
 94 |             inline: false,
 95 |             vertical: true
 96 |           }
 97 |         },
 98 |         techOrder: ['html5'],
 99 |         plugins: {}
100 |       }, globalOptions.options, options)
101 | 
102 |       // plugins
103 |       if (videoOptions.plugins) {
104 |         delete videoOptions.plugins.__ob__
105 |       }
106 | 
107 |       // console.log('videoOptions', videoOptions)
108 | 
109 |       // eventEmit
110 |       const eventEmit = (vnode, name, data) => {
111 |         const handlers = (vnode.data && vnode.data.on) || 
112 |                          (vnode.componentOptions && vnode.componentOptions.listeners)
113 |         if (handlers && handlers[name]) handlers[name].fns(data)
114 |       }
115 | 
116 |       // emit event
117 |       const emitPlayerState = (event, value) => {
118 |         if (event) {
119 |           eventEmit(vnode, event, player)
120 |         }
121 |         if (value) {
122 |           eventEmit(vnode, customEventName, { [event]: value })
123 |         }
124 |       }
125 |       
126 |       // instance
127 |       player = self[instanceName] = videojs(el.children[0], videoOptions, function() {
128 | 
129 |         // events
130 |         const events = DEFAULT_EVENTS.concat(componentEvents).concat(globalOptions.events)
131 | 
132 |         // watch events
133 |         const onEdEvents = {}
134 |         for (let i = 0; i < events.length; i++) {
135 |           if (typeof events[i] === 'string' && onEdEvents[events[i]] === undefined) {
136 |             (event => {
137 |               onEdEvents[event] = null
138 |               this.on(event, () => {
139 |                 emitPlayerState(event, true)
140 |               })
141 |             })(events[i])
142 |           }
143 |         }
144 | 
145 |         // watch timeupdate
146 |         this.on('timeupdate', function() {
147 |           emitPlayerState('timeupdate', this.currentTime())
148 |         })
149 | 
150 |         // player readied
151 |         emitPlayerState('ready')
152 |       })
153 |     }
154 |   }
155 | 
156 |   // dispose
157 |   const disposePlayer = (el, binding, vnode) => {
158 |     const self = vnode.context
159 |     const instanceName = getInstanceName(el, binding, vnode)
160 |     const player = self[instanceName]
161 |     if (player && player.dispose) {
162 |       if (player.techName_ !== 'Flash') {
163 |         player.pause && player.pause()
164 |       }
165 |       player.dispose()
166 |       repairDom(el)
167 |       self[instanceName] = null
168 |       delete self[instanceName]
169 |     }
170 |   }
171 | 
172 |   return {
173 |     inserted: initPlayer,
174 | 
175 |     // Bind directive
176 |     bind(el, binding, vnode) {
177 |       repairDom(el)
178 |     },
179 |     
180 |     // Parse text model change
181 |     update(el, binding, vnode) {
182 |       const options = binding.value || {}
183 |       disposePlayer(el, binding, vnode)
184 |       if (options && options.sources && options.sources.length) {
185 |           initPlayer(el, binding, vnode)
186 |         }
187 |     },
188 |     
189 |     // Destroy this directive
190 |     unbind: disposePlayer
191 |   }
192 | }
193 | 
194 | // videoPlayer
195 | const videoPlayer = videoPlayerDirective({})
196 | 
197 | // Global quill default options
198 | const install = function (Vue, globalOptions = {
199 |   options: {},
200 |   events: []
201 | }) {
202 | 
203 |   // Mount quill directive for Vue global
204 |   Vue.directive('video-player', videoPlayerDirective(globalOptions))
205 | }
206 | 
207 | const VueVideoPlayer = { videojs, videoPlayer, install }
208 | 
209 | export default VueVideoPlayer
210 | export { videojs, videoPlayer, install }
211 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import VueVideoPlayer from './components/video-player'
 4 | 
 5 | // require videojs style
 6 | import 'video.js/dist/video-js.css'
 7 | import './components/video-player/custom-theme.css'
 8 | 
 9 | Vue.use(VueVideoPlayer, /* {
10 |   options: global default options,
11 |   events: global videojs events
12 | } */)
13 | Vue.config.productionTip = false
14 | 
15 | new Vue({
16 |   render: h => h(App),
17 | }).$mount('#app')
18 | 


--------------------------------------------------------------------------------