Commit b96b37007bdaa7888c101985da7a16a1bbdf40ee
1 parent
4c7dfa8d
视频播放
Showing
1 changed file
with
31 additions
and
7 deletions
src/pages/index/index.vue
| @@ -44,7 +44,7 @@ | @@ -44,7 +44,7 @@ | ||
| 44 | <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay(2)" | 44 | <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay(2)" |
| 45 | ref="videoPlayer" | 45 | ref="videoPlayer" |
| 46 | :playsinline="playsinline" | 46 | :playsinline="playsinline" |
| 47 | - :options="playerOptions" | 47 | + :options="playerOptions2" |
| 48 | x5-playsinline | 48 | x5-playsinline |
| 49 | webkit-playsinline> | 49 | webkit-playsinline> |
| 50 | </video-player> | 50 | </video-player> |
| @@ -92,7 +92,31 @@ | @@ -92,7 +92,31 @@ | ||
| 92 | fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 | 92 | fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 |
| 93 | sources: [{ | 93 | sources: [{ |
| 94 | type: "video/mp4", | 94 | type: "video/mp4", |
| 95 | - src: "http://wjj.ys2.cnliveimg.com/769/shop/video/2019/03/03/5c7bebffe2a35.MP4" | 95 | + src: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e09739a07d18.mp4" |
| 96 | + }], | ||
| 97 | + hls: true, // 启用hls？ | ||
| 98 | + poster: './static/img/index/video1.png', // 你的封面地址 | ||
| 99 | + width: document.documentElement.clientWidth || document.body.clientWidth, | ||
| 100 | + notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 | ||
| 101 | + }, | ||
| 102 | + playerOptions2: { | ||
| 103 | + events: [], | ||
| 104 | + playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度 | ||
| 105 | + autoplay: false, // 如果true,浏览器准备好时开始回放。 | ||
| 106 | + controls: true, // 控制条 | ||
| 107 | + preload: 'auto', // 视频预加载 | ||
| 108 | + muted: false, // 默认情况下将会消除任何音频。 | ||
| 109 | + loop: false, // 导致视频一结束就重新开始。 | ||
| 110 | + language: 'zh-CN', | ||
| 111 | + controlBar: { | ||
| 112 | + timeDivider: true, | ||
| 113 | + durationDisplay: true | ||
| 114 | + }, | ||
| 115 | + aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） | ||
| 116 | + fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 | ||
| 117 | + sources: [{ | ||
| 118 | + type: "video/mp4", | ||
| 119 | + src: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4" | ||
| 96 | }], | 120 | }], |
| 97 | hls: true, // 启用hls？ | 121 | hls: true, // 启用hls？ |
| 98 | poster: './static/img/index/video1.png', // 你的封面地址 | 122 | poster: './static/img/index/video1.png', // 你的封面地址 |
| @@ -122,11 +146,11 @@ | @@ -122,11 +146,11 @@ | ||
| 122 | * @param {object} $event [播放器对象] | 146 | * @param {object} $event [播放器对象] |
| 123 | */ | 147 | */ |
| 124 | onPlayerPlay(event) { | 148 | onPlayerPlay(event) { |
| 125 | - if (event == 1) { | ||
| 126 | - this.playerOptions.sources[0].src= "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e09739a07d18.mp4" | ||
| 127 | - } else { | ||
| 128 | - this.playerOptions.sources[0].src= "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4" | ||
| 129 | - } | 149 | +// if (event == 1) { |
| 150 | +// this.playerOptions.sources[0].src = "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e09739a07d18.mp4" | ||
| 151 | +// } else { | ||
| 152 | +// this.playerOptions.sources[0].src = "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4" | ||
| 153 | +// } | ||
| 130 | }, | 154 | }, |
| 131 | } | 155 | } |
| 132 | } | 156 | } |