修复视频切换问题

src/packages/leftslip/doc.md

@@ -104,16 +104,11 @@ export default {
 };
 ```
 
-## Prop
+## slot
 
 | 字段           | 说明                 | 类型    | 默认值 |
 | -------------- | -------------------- | ------- | ------ |
-| slot:slip-main | 列表主内容自定义区域 | html    | -      |
-| slot:slipbtns  | 左滑按钮自定义区域   | html    | -      |
-| onlyDelBtn     | 设置单一删除按钮     | Boolean | false  |
+| slip-main | 列表主内容自定义区域 | html    | -      |
+| slipbtns  | 左滑按钮自定义区域   | html    | -      |
 
-## Event
 
-| 字段      | 说明                       | 回调参数 |
-| --------- | -------------------------- | -------- |
-| oneDelete | 单一删除按钮模式下删除事件 | 无       |

src/packages/video/demo.vue

@@ -25,74 +25,146 @@
             <nut-video :sources="sources" :options="options5"></nut-video>
         </div>
         <h4>设置视频为背景图</h4>
-        <p>当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true，移动端需要设置 playsinline 行内展示（兼容安卓用）</p>
+        <p>当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true，移动端需要设置
+            playsinline 行内展示（兼容安卓用）</p>
         <div class="video-con">
             <nut-video :sources="sources" :options="options6"></nut-video>
         </div>
+        <h4>视频切换</h4>
+        <p>播放上一个、下一个视频</p>
+        <div class="video-con" ref="changeVideo">
+            <nut-video :sources="sources1" :options="options"></nut-video>
+        </div>
+
+        <button @click="prevVideo">播放上一个</button> <button @click="nextVideo">播放下一个</button>
     </div>
 </template>
 
 <script>
-export default {
-    components: {},
-    data() {
-        return {
-            sources: [
-                {
-                    src:
-                        'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-                    type: 'video/mp4'
-                }
-            ],
+    export default {
+        components: {},
+        data() {
+            return {
+                sources: [
+                    {
+                        src:
+                            'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+                        type: 'video/mp4'
+                    }
+                ],
+                sources1: [
+                    {
+                        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+                        type: 'video/mp4'
+                    }
+                ],
+                videoId: 'videoid',
+                options: {
+                    controls: true
+                },
+                options2: {
+                    autoplay: true,
+                    muted: true,
+                    volume: 0.6,
+                    poster: ''
+                },
+                options3: {
+                    controls: true,
+                    muted: true
+                },
+                options4: {
+                    controls: true,
+                    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: '',
+                    muted: true,
+                    disabled: true,
+                    playsinline: true,
+                    loop: true
+                },
 
-            options: {
-                controls: true,
+            };
+        },
+        methods: {
+            play(elm) {
+                console.log('play', elm);
             },
-            options2: {
-                autoplay: true,
-                volume: 0.6,
-                poster: '',
+            pause(e) {
+                console.log('pause');
             },
-            options3: {
-                controls: true,
-                muted: true
+            playend(e) {
+                alert('播放结束');
             },
-            options4: {
-                controls: true,
-                poster: 'https://img10.360buyimg.com/ling/s640x356_jfs/t1/96045/31/13848/43886/5e5e35ffE68170c74/861a6394e38810f0.png',
+            testPlay(e) {
+                console.log('play', elm);
             },
-            options5: {
-                playsinline: true,
-                controls: true,
+            changeVideo() {
+                this.sources1 = [
+                    {
+                        src: 'http://vjs.zencdn.net/v/oceans.mp4',
+                        type: 'video/mp4'
+                    }
+                ]
+
+                let videoElement = document.getElementById("testvideo").getElementsByTagName('video')[0];
+                videoElement.pause();
+                videoElement.removeAttribute('src');
+                videoElement.src = this.sources1.src;
+                videoElement.load();
             },
-            options6: {
-                autoplay: true,
-                volume: 0.6,
-                poster: '',
-                muted: true,
-                disabled: true,
-                playsinline: true,
-                loop: true
+            prevVideo() {
+                let videoCon = this.$refs.changeVideo
+                let player = videoCon.getElementsByTagName('video')[0];
+
+                this.sources1 = [
+                    {
+                        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+                        type: 'video/mp4'
+                    }
+                ]
+                this.$nextTick(() => {
+                    player.load()
+                })
+
             },
-           
-        };
-    },
-    methods: {
-        play(elm){
-            console.log('play',elm)
-        },
-        pause(e){
-            console.log('pause')
-        },
-        playend(e){
-            alert('播放结束')
+            nextVideo() {
+                let videoCon = this.$refs.changeVideo
+                let player = videoCon.getElementsByTagName('video')[0];
+
+                this.sources1 = [
+                    {
+                        src: 'http://vjs.zencdn.net/v/oceans.mp4',
+                        type: 'video/mp4'
+                    }
+                ]
+                this.$nextTick(() => {
+                    player.load()
+                })
+
+            }
         }
-    }
-};
+    };
 </script>
 
 <style lang="scss" scoped>
-.nut-video{
-    height:200px;
-}
-</style>
+    .nut-video {
+        height: 200px;
+    }
+
+    button {
+        margin: 5px 10px 5px 0;
+        background: #f0250f;
+        border: 1px solid #f0250f;
+        height: 32px;
+        border-radius: 4px;
+        color: #fff;
+        font-size: 14px;
+    }
+</style>

src/packages/video/doc.md

@@ -14,7 +14,6 @@
 
 ```javascript
 export default {
-  methods: {
     data() {
         return {
             sources: [
@@ -27,6 +26,7 @@ export default {
             options: {
                 controls: true
             },
+		}
     },
     methods: {
         play(elm){
@@ -39,7 +39,7 @@ export default {
             alert('播放结束')
         }
     }
-  }
+  
 };
 ```
 
@@ -53,7 +53,7 @@ autoplay 属性设置视频自动播放
 
 ```javascript
 export default {
-  methods: {
+  
     data() {
         return {
             options2: {
@@ -61,9 +61,9 @@ export default {
                 volume: 0.6,
                 poster: ''
             },
-
+		}
     },
-  }
+  
 };
 ```
 
@@ -77,16 +77,15 @@ muted 属性设置视频初始化静音
 
 ```javascript
 export default {
-  methods: {
     data() {
         return {
             options3: {
                 controls: true,
                 muted: true
             },
-
+		}
     },
-  }
+  
 };
 ```
 
@@ -100,16 +99,14 @@ poster 属性设置视频海报
 
 ```javascript
 export default {
-  methods: {
     data() {
         return {
             options4: {
                 controls: true,
                 poster: 'https://img10.360buyimg.com/ling/s640x356_jfs/t1/96045/31/13848/43886/5e5e35ffE68170c74/861a6394e38810f0.png',
             },
-
+		}
     },
-  }
 };
 ```
 
@@ -123,16 +120,14 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 
 ```javascript
 export default {
-  methods: {
     data() {
         return {
             options5: {
                 playsinline: true,
                 controls: true,
             },
-
+		}
     },
-  }
 };
 ```
 
@@ -146,7 +141,6 @@ export default {
 
 ```javascript
 export default {
-  methods: {
     data() {
         return {
             options6: {
@@ -158,12 +152,74 @@ export default {
                 playsinline: true,
                 loop: true
             },
+		}
+    }
+};
+```
 
-    },
-  }
+## 视频切换
+
+播放上一个、下一个视频
+
+```html
+  	<div class="video-con" ref="changeVideo">
+		<nut-video :sources="sources1" :options="options"></nut-video>
+	</div>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            sources1: [
+                {
+                    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+                    type: 'video/mp4'
+                }
+            ],
+            options: {
+                controls: true
+            },
+
+    	},
+  	}
+	methods: {
+        prevVideo() {
+			let videoCon = this.$refs.changeVideo
+			let player = videoCon.getElementsByTagName('video')[0];
+			//改变视频源
+			this.sources1 = [
+				{
+					src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+					type: 'video/mp4'
+				}
+			]
+			this.$nextTick(() => {
+				player.load()
+			})
+
+		},
+		nextVideo() {
+			let videoCon = this.$refs.changeVideo
+			let player = videoCon.getElementsByTagName('video')[0];
+			//改变视频源
+			this.sources1 = [
+				{
+					src: 'http://vjs.zencdn.net/v/oceans.mp4',
+					type: 'video/mp4'
+				}
+			]
+			this.$nextTick(() => {
+				player.load()
+			})
+
+		}
+    }
 };
 ```
 
+
+
 ## Prop
 
 | 字段                | 说明                                       | 类型    | 默认值   |

src/packages/video/video.vue

@@ -1,16 +1,7 @@
 <template>
     <div class="nut-video" ref="videocon">
-        <video
-            ref="video"
-            class="nut-videoplayer"
-            type="video/mp4"
-            :muted="options.muted"
-            :autoplay="options.autoplay"
-            :loop="options.loop"
-            :poster="options.poster"
-            :controls="options.controls"
-            @error="handleError"
-        >
+        <video ref="video" class="nut-videoplayer" type="video/mp4" :muted="options.muted" :autoplay="options.autoplay"
+            :loop="options.loop" :poster="options.poster" :controls="options.controls" @error="handleError">
             <source v-for="source in sources" :src="source.src" :type="source.type" :key="source.src" />
         </video>
         <div class="playing-mask" @click="play"></div>
@@ -38,209 +29,209 @@
     </div>
 </template>
 <script>
-import {throttle} from '../../utils/throttle';
-export default {
-    name: 'nut-video',
-    props: {
-        src: '',
-        playsinline: {
-            type: Boolean,
-            default: false
-        },
-        sources: Array,
-        options: {
-            type: Object,
-            default() {
-                return {
-                    autoplay: false, //是否自动播放
-                    volume: 0.5,
-                    poster: '',
-                    loop: false,
-                    controls: true,
-                    muted: false, //是否静音
-                    disabled: false, //禁止操作
-                    playsinline: false //行内展示
-                };
-            },
-            required: true
-        }
-    },
-    data() {
-        return {
-            videoElm: null,
-            initial: true, //控制封面的显示
-            showToolbox: false, //控制控制器和标题的显示
-            // 视频容器元素
-            player: {
-                $player: null,
-                pos: null
-            },
-            // progress进度条元素
-            progressBar: {
-                progressElm: null, // 进度条DOM对象
-                pos: null
+    import { throttle } from '../../utils/throttle';
+    export default {
+        name: 'nut-video',
+        props: {
+            src: '',
+            playsinline: {
+                type: Boolean,
+                default: false
             },
-            // video控制显示设置
-            videoSet: {
-                loaded: 0, // 缓存长度
-                displayTime: '00:00', // 进度时间
-                totalTime: '00:00', // 总时间
-                progress: {
-                    width: 0, // 进度条长度
-                    current: 0 // 进度条当前位置
-                }
-            },
-            state: {
-                contrlShow: false,
-                vol: 0.5, //音量
-                currentTime: 0, //当前时间
-                fullScreen: false,
-                playing: false, //是否正在播放
-                isLoading: false,
-                isEnd: false,
-                isError: false
-            }
-        };
-    },
-    mounted() {
-        this.init();
-    },
-    methods: {
-        init() {
-            this.videoElm = this.$el.getElementsByTagName('video')[0];
-            if (this.options.autoplay) {
-                this.play();
+            sources: Array,
+            options: {
+                type: Object,
+                default() {
+                    return {
+                        autoplay: false, //是否自动播放
+                        volume: 0.5,
+                        poster: '',
+                        loop: false,
+                        controls: true,
+                        muted: false, //是否静音
+                        disabled: false, //禁止操作
+                        playsinline: false //行内展示
+                    };
+                },
+                required: true
             }
+        },
+        data() {
+            return {
+                videoElm: null,
+                initial: true, //控制封面的显示
+                showToolbox: false, //控制控制器和标题的显示
+                // 视频容器元素
+                player: {
+                    $player: null,
+                    pos: null
+                },
+                // progress进度条元素
+                progressBar: {
+                    progressElm: null, // 进度条DOM对象
+                    pos: null
+                },
+                // video控制显示设置
+                videoSet: {
+                    loaded: 0, // 缓存长度
+                    displayTime: '00:00', // 进度时间
+                    totalTime: '00:00', // 总时间
+                    progress: {
+                        width: 0, // 进度条长度
+                        current: 0 // 进度条当前位置
+                    }
+                },
+                state: {
+                    contrlShow: false,
+                    vol: 0.5, //音量
+                    currentTime: 0, //当前时间
+                    fullScreen: false,
+                    playing: false, //是否正在播放
+                    isLoading: false,
+                    isEnd: false,
+                    isError: false
+                }
+            };
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            init() {
+                this.videoElm = this.$el.getElementsByTagName('video')[0];
+                if (this.options.autoplay) {
+                    this.play();
+                }
 
-            if (this.options.playsinline) {
-                this.videoElm.setAttribute('playsinline', this.options.playsinline);
-                this.videoElm.setAttribute('webkit-playsinline', this.options.playsinline);
-                this.videoElm.setAttribute('x5-playsinline', this.options.playsinline);
-                this.videoElm.setAttribute('x5-video-player-type', 'h5');
-                this.videoElm.setAttribute('x5-video-player-fullscreen', false);
-            }
-            this.volumeHandle();
+                if (this.options.playsinline) {
+                    this.videoElm.setAttribute('playsinline', this.options.playsinline);
+                    this.videoElm.setAttribute('webkit-playsinline', this.options.playsinline);
+                    this.videoElm.setAttribute('x5-playsinline', this.options.playsinline);
+                    this.videoElm.setAttribute('x5-video-player-type', 'h5');
+                    this.videoElm.setAttribute('x5-video-player-fullscreen', false);
+                }
+                this.volumeHandle();
 
-            // const $player = this.$el;
-            // const $progress = this.$el.getElementsByClassName('progress')[0];
-            // // 播放器位置
-            // this.player.$player = $player;
-            // this.progressBar.$progress = $progress;
-            // this.player.pos = $player.getBoundingClientRect();
-            // this.progressBar.pos = $progress.getBoundingClientRect();
-            // this.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
+                // const $player = this.$el;
+                // const $progress = this.$el.getElementsByClassName('progress')[0];
+                // // 播放器位置
+                // this.player.$player = $player;
+                // this.progressBar.$progress = $progress;
+                // this.player.pos = $player.getBoundingClientRect();
+                // this.progressBar.pos = $progress.getBoundingClientRect();
+                // this.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
 
-            this.videoElm.addEventListener('play', () => {
-                this.state.playing = true;
-            });
-            this.videoElm.addEventListener('pause', () => {
-                this.state.playing = false;
-            });
-        },
-        play() {
-            this.state.playing = !this.state.playing;
+                this.videoElm.addEventListener('play', () => {
+                    this.state.playing = true;
+                });
+                this.videoElm.addEventListener('pause', () => {
+                    this.state.playing = false;
+                });
+            },
+            play() {
+                this.state.playing = !this.state.playing;
 
-            if (this.options.autoplay && this.options.disabled) {
-                this.state.playing = true;
-                return false;
-            }
-            if (this.videoElm) {
-                // if (this.state.playing) {
-                //     this.videoElm.play();
-                //     this.videoElm.addEventListener('ended', this.playEnded);
-                //     this.$emit('play', this.video);
-                // } else {
-                //     this.videoElm.pause();
-                //     this.$emit('pause', this.video);
-                // }
-                // 播放状态
-                if (this.state.playing) {
-                    try {
-                        this.videoElm.play();
-                        // this.isPauseTouch = false;
-                        // 监听缓存进度
-                        // this.videoElm.addEventListener('progress', e => {
-                        //     this.getLoadTime();
-                        // });
-                        // // 监听播放进度
-                        // this.videoElm.addEventListener('timeupdate', throttle(this.getPlayTime, 100, 1));
-                        // 监听结束
-                        this.videoElm.addEventListener('ended', this.playEnded);
-                        this.$emit('play', this.videoElm);
-                    } catch (e) {
-                        // 捕获url异常出现的错误
-                        this.handleError()
-                    }
+                if (this.options.autoplay && this.options.disabled) {
+                    this.state.playing = true;
+                    return false;
                 }
-                // 停止状态
-                else {
-                    this.isPauseTouch = true;
-                    this.videoElm.pause();
-                    this.$emit('pause', this.videoElm);
+                if (this.videoElm) {
+                    // if (this.state.playing) {
+                    //     this.videoElm.play();
+                    //     this.videoElm.addEventListener('ended', this.playEnded);
+                    //     this.$emit('play', this.video);
+                    // } else {
+                    //     this.videoElm.pause();
+                    //     this.$emit('pause', this.video);
+                    // }
+                    // 播放状态
+                    if (this.state.playing) {
+                        try {
+                            this.videoElm.play();
+                            // this.isPauseTouch = false;
+                            // 监听缓存进度
+                            // this.videoElm.addEventListener('progress', e => {
+                            //     this.getLoadTime();
+                            // });
+                            // // 监听播放进度
+                            // this.videoElm.addEventListener('timeupdate', throttle(this.getPlayTime, 100, 1));
+                            // 监听结束
+                            this.videoElm.addEventListener('ended', this.playEnded);
+                            this.$emit('play', this.videoElm);
+                        } catch (e) {
+                            // 捕获url异常出现的错误
+                            this.handleError()
+                        }
+                    }
+                    // 停止状态
+                    else {
+                        this.isPauseTouch = true;
+                        this.videoElm.pause();
+                        this.$emit('pause', this.videoElm);
+                    }
                 }
-            }
-        },
-        volumeHandle() {
-            this.state.vol = this.videoElm.volume;
-        },
-        playEnded() {
-            // console.log('ended')
-            this.state.playing = false;
-            this.state.isEnd = true;
-            this.state.controlBtnShow = true;
-            this.videoSet.displayTime = '00:00';
-            this.videoSet.progress.current = 0;
-            this.videoElm.currentTime = 0;
-            this.$emit('playend', this.videoElm);
-        },
-        // 数据加载出错
-        handleError() {
-            // console.log('error')
-            this.state.isError = true;
-        },
+            },
+            volumeHandle() {
+                this.state.vol = this.videoElm.volume;
+            },
+            playEnded() {
+                // console.log('ended')
+                this.state.playing = false;
+                this.state.isEnd = true;
+                this.state.controlBtnShow = true;
+                this.videoSet.displayTime = '00:00';
+                this.videoSet.progress.current = 0;
+                this.videoElm.currentTime = 0;
+                this.$emit('playend', this.videoElm);
+            },
+            // 数据加载出错
+            handleError() {
+                // console.log('error')
+                this.state.isError = true;
+            },
 
-        fullScreen() {
-            if (!this.state.fullScreen) {
-                this.state.fullScreen = true;
-                this.video.webkitRequestFullScreen();
-            } else {
-                this.state.fullScreen = false;
-                document.webkitCancelFullScreen();
+            fullScreen() {
+                if (!this.state.fullScreen) {
+                    this.state.fullScreen = true;
+                    this.video.webkitRequestFullScreen();
+                } else {
+                    this.state.fullScreen = false;
+                    document.webkitCancelFullScreen();
+                }
+                setTimeout(this.initVideo, 200);
+            },
+            // 获取播放时间
+            getPlayTime() {
+                const percent = this.videoElm.currentTime / this.videoElm.duration;
+                this.videoSet.progress.current = Math.round(this.videoSet.progress.width * percent);
+                // 赋值时长
+                this.videoSet.totalTime = timeParse(this.videoElm.duration);
+                this.videoSet.displayTime = timeParse(this.videoElm.currentTime);
+            },
+            // 获取缓存时间
+            getLoadTime() {
+                // console.log('缓存了...',this.videoElm.buffered.end(0));
+                this.videoSet.loaded = (this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
+            },
+            getTime() {
+                this.videoElm.addEventListener('durationchange', e => {
+                    console.log(e);
+                });
+                this.videoElm.addEventListener('progress', e => {
+                    this.videoSet.loaded = (-1 + this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
+                });
+                this.videoSet.len = this.videoElm.duration;
+            },
+            sliderStart() { },
+            touchmove() { },
+            touchend() { },
+            // 点击重新加载
+            retry() {
+                console.log('error')
+                this.state.isError = false;
+                this.init();
             }
-            setTimeout(this.initVideo, 200);
-        },
-        // 获取播放时间
-        getPlayTime() {
-            const percent = this.videoElm.currentTime / this.videoElm.duration;
-            this.videoSet.progress.current = Math.round(this.videoSet.progress.width * percent);
-            // 赋值时长
-            this.videoSet.totalTime = timeParse(this.videoElm.duration);
-            this.videoSet.displayTime = timeParse(this.videoElm.currentTime);
-        },
-        // 获取缓存时间
-        getLoadTime() {
-            // console.log('缓存了...',this.videoElm.buffered.end(0));
-            this.videoSet.loaded = (this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
         },
-        getTime() {
-            this.videoElm.addEventListener('durationchange', e => {
-                console.log(e);
-            });
-            this.videoElm.addEventListener('progress', e => {
-                this.videoSet.loaded = (-1 + this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
-            });
-            this.videoSet.len = this.videoElm.duration;
-        },
-        sliderStart() {},
-        touchmove() {},
-        touchend() {},
-        // 点击重新加载
-        retry() {
-            console.log('error')
-            this.state.isError = false;
-            this.init();
-        }
-    },
-    beforeDestroy() {}
-};
-</script>
+        beforeDestroy() { }
+    };
+</script>