w-front-end / Worship_and_learn_upward · Commits

Commit 36cd53ccb9246617e7078a325bb0c5627002edbf

Authored by zhiyangdu
1 parent c614d45d

视频播放

Inline Side-by-side
Showing 1 changed file with 34 additions and 10 deletions
src/pages/index/index.vue
  View file @36cd53c
... ... @@ -13,13 +13,13 @@
13 13 <!--视频-->
14 14 <div>
15 15 <div class="video_box">
16   - <video-player class="video-player vjs-custom-skin""
17   - ref="videoPlayer"
18   - :playsinline="playsinline"
19   - :options="playerOptions"
20   - x5-playsinline
21   - webkit-playsinline>
22   - </video-player>
  16 + <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay($event)"
  17 + ref="videoPlayer"
  18 + :playsinline="playsinline"
  19 + :options="playerOptions"
  20 + x5-playsinline
  21 + webkit-playsinline>
  22 + </video-player>
23 23 </div>
24 24 </div>
25 25  
... ... @@ -41,10 +41,10 @@
41 41 <!--视频-->
42 42 <div>
43 43 <div class="video_box">
44   - <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay($event)">
  44 + <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay($event)"
45 45 ref="videoPlayer"
46 46 :playsinline="playsinline"
47   - :options="playerOptions"
  47 + :options="playerOptions2"
48 48 x5-playsinline
49 49 webkit-playsinline>
50 50 </video-player>
... ... @@ -92,13 +92,37 @@
92 92 fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
93 93 sources: [{
94 94 type: "video/mp4",
95   - src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
  95 + src: "http://wjj.ys2.cnliveimg.com/769/shop/video/2019/03/03/5c7bebffe2a35.MP4"
96 96 }],
97 97 hls: true, // 启用hls？
98 98 poster: '../../../static/img/index/video1.png', // 你的封面地址
99 99 width: document.documentElement.clientWidth || document.body.clientWidth,
100 100 notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
101 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: "http://wjj.ys2.cnliveimg.com/769/shop/video/2019/03/03/5c7bebffe2a35.MP4"
  120 + }],
  121 + hls: true, // 启用hls？
  122 + poster: '../../../static/img/index/video2.png', // 你的封面地址
  123 + width: document.documentElement.clientWidth || document.body.clientWidth,
  124 + notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  125 + }
102 126 }
103 127 },
104 128 components:{
... ...