Browse Source

update 视频播放组件demo修改

yewenwen 5 years ago
parent
commit
e0b6fbc9a9
3 changed files with 38 additions and 5 deletions
  1. 12 2
      src/packages/video/demo.vue
  2. 26 2
      src/packages/video/doc.md
  3. 0 1
      src/packages/video/video.vue

+ 12 - 2
src/packages/video/demo.vue

@@ -19,10 +19,15 @@
         <div class="video-con">
             <nut-video :sources="sources" :options="options4"></nut-video>
         </div>
+        <h4>行内播放</h4>
+        <p>playsinline属性设置移动端视频行内播放,阻止新打开页面播放(兼容ios,兼容部分安卓机)</p>
+        <div class="video-con">
+            <nut-video :sources="sources" :options="options5"></nut-video>
+        </div>
         <h4>设置视频为背景图</h4>
         <p>当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true,移动端需要设置 playsinline 行内展示(兼容安卓用)</p>
         <div class="video-con">
-            <nut-video :sources="sources" :options="options5"></nut-video>
+            <nut-video :sources="sources" :options="options6"></nut-video>
         </div>
     </div>
 </template>
@@ -46,7 +51,7 @@ export default {
             options2: {
                 autoplay: true,
                 volume: 0.6,
-                poster: ''
+                poster: '',
             },
             options3: {
                 controls: true,
@@ -57,6 +62,10 @@ export default {
                 poster: 'https://img10.360buyimg.com/ling/s640x356_jfs/t1/96045/31/13848/43886/5e5e35ffE68170c74/861a6394e38810f0.png',
             },
             options5: {
+                playsinline: true,
+                controls: true,
+            },
+            options6: {
                 autoplay: true,
                 volume: 0.6,
                 poster: '',
@@ -65,6 +74,7 @@ export default {
                 playsinline: true,
                 loop: true
             },
+           
         };
     },
     methods: {

+ 26 - 2
src/packages/video/doc.md

@@ -113,10 +113,32 @@ export default {
 };
 ```
 
+## 行内播放
+
+playsinline属性设置移动端视频行内播放,阻止新打开页面播放(兼容ios,兼容部分安卓机)
+
+```html
+<nut-video :sources="sources" :options="options5"></nut-video>
+```
+
+```javascript
+export default {
+  methods: {
+    data() {
+        return {
+            options5: {
+                playsinline: true,
+                controls: true,
+            },
+
+    },
+  }
+};
+```
 
 ## 视频背景图
 
-当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true,移动端需要设置 playsinline 行内展示(兼容安卓用)
+当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true,移动端需要设置 playsinline 行内展示
 
 ```html
 <nut-video :sources="sources" :options="options5"></nut-video>
@@ -127,7 +149,7 @@ export default {
   methods: {
     data() {
         return {
-            options5: {
+            options6: {
                 autoplay: true,
                 volume: 0.6,
                 poster: '',
@@ -142,6 +164,8 @@ export default {
 };
 ```
 
+
+
 ## Prop
 
 | 字段                | 说明                                       | 类型    | 默认值   |

+ 0 - 1
src/packages/video/video.vue

@@ -211,7 +211,6 @@ export default {
         },
         // 获取播放时间
         getPlayTime() {
-            console.log(222);
             const percent = this.videoElm.currentTime / this.videoElm.duration;
             this.videoSet.progress.current = Math.round(this.videoSet.progress.width * percent);
             // 赋值时长