y***@163.com
y***@163.com
  • 发布:2019-05-08 16:26
  • 更新:2020-04-20 17:42
  • 阅读:5970

uni-app video组件怎么会同时播放两个视频

分类:uni-app

uni-app video组件怎么会同时播放两个视频,播放第一个视频的时候点击第二个视频播放,第一个视频不会暂停,需要如何设置呢?

2019-05-08 16:26 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

export default {  
  data(){  
    return {  
      video:null  
    }  
  },  
  onLoad(){  
    let video= uni.createVideoContext()  
    this.video= video;  
  },  
  methods:{  
    handle(){  
      // 检测 this.video 的值  
      // 停止播放  
      // do something ...  
    }  
  }  
}
  • y***@163.com (作者)

    你好,我没懂,我的逻辑是这样的,一组视频列表循环获取到,uni.createVideoContext() 需要传入参数video组件的id,用上面的代码获取到的this.video都是一样的。

    2019-05-09 14:50

  • y***@163.com (作者)

    谢谢,懂了,知道怎么做了。

    2019-05-09 15:23

  • c***@qq.com

    回复 y***@163.com: 怎么做到的? 可以把代码贴出来看一下吗?

    2019-05-16 15:36

  • y***@163.com (作者)

    回复 c***@qq.com:

    handle(index){

    // 检测 this.video 的值

    // 停止播放

    // do something ...

    let newVideo = uni.createVideoContext(${index});

    if(this.video !== newVideo) {

    newVideo.play()

    this.video.pause();


            }  
    this.video = newVideo;

    },

    2019-05-16 15:54

  • c***@qq.com

    回复 y***@163.com: 我的整个视频列表 都很卡,不知道什么原因,你遇到了吗?

    2019-05-16 16:23

  • y***@163.com (作者)

    回复 c***@qq.com: 没有哎,我的不卡。

    2019-05-16 16:32

  • 嗨翻咯

    回复 y***@163.com: 请问一下,我的图文和视频混杂的列表,如何获取到正在播放视频的index,你的${index}这个是啥意思啊

    2019-08-07 13:50

  • 8***@qq.com

    回复 y***@163.com: 作者请详细告知怎样做,怎样选中除正在播放外的所有视频???uni.createVideoContext()不传参就报错

    2019-10-23 11:34

y***@163.com

y***@163.com (作者) - 智科研学淘

有人知道怎么解决吗

9***@qq.com

9***@qq.com - 90

(仿抖音)当一个视频播放结束后,自动切换到下一个视频,要怎么实现?

利用video标签 ended事件,我是用swiper包裹video标签实现的滑动切换视频效果,如何在触发@ended事件时让swiper滑动?

<template>  
    <view>  
        <swiper vertical="true" @change="swiperChange">  
            <swiper-item v-for="(item,index) in list" :key="index">  
                <view class="swiper-item">  
                    <video :id="index" :src="item.thumb.img_arr.video" :poster="item.thumb.img_arr.jpg" controls objectFit="fill" @ended="autoNext">  
                    </video>  
                </view>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                videoCur: 0,  
                video: null,  
                list: []  
            }  
        },  
        created() {  
            this.video = uni.createVideoContext(String(this.videoCur));  
        },  
        onload() {  
            this.video.play();  
        },  
        methods: {  
            swiperChange(e) {  
                let index = e.target.current;  
                this.videoCur = index;  
                let newVideo = uni.createVideoContext(String(index));  
                if (this.video !== newVideo) {  
                    newVideo.play();  
                    this.video.pause();  
                }  
                this.video = newVideo;  
            },  
            autoNext(){  
                //当前视频播放结束后,自动切换下一个视频  
            }  
        }  
    }  
</script>  

<style>  
    swiper {  
        width: 100%;  
        height: 100vh;  
    }  

    swiper-item video {  
        width: 100%;  
        height: 100vh;  
        display: block;  
    }  
</style>
  • 1***@qq.com

    swiper有个current属性,当视频播放完成以后current+1即可

    2019-08-02 10:06

4***@qq.com

4***@qq.com - 11111111111111111

1111

思达通

思达通 - 思达通

@ended="autoNext" 在小程序端有效,在app开发中无效

风云杭州

风云杭州

关注,也遇到这个问题

该问题目前已经被锁定, 无法添加新回复