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 +13,13 @@
13 <!--视频--> 13 <!--视频-->
14 <div> 14 <div>
15 <div class="video_box"> 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 </div> 23 </div>
24 </div> 24 </div>
25 25
@@ -41,10 +41,10 @@ @@ -41,10 +41,10 @@
41 <!--视频--> 41 <!--视频-->
42 <div> 42 <div>
43 <div class="video_box"> 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 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,13 +92,37 @@ @@ -92,13 +92,37 @@
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: "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 hls: true, // 启用hls？ 97 hls: true, // 启用hls？
98 poster: '../../../static/img/index/video1.png', // 你的封面地址 98 poster: '../../../static/img/index/video1.png', // 你的封面地址
99 width: document.documentElement.clientWidth || document.body.clientWidth, 99 width: document.documentElement.clientWidth || document.body.clientWidth,
100 notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 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 components:{ 128 components:{