Javin
Javin
  • 发布:2019-10-06 04:54
  • 更新:2020-09-21 12:34
  • 阅读:2768

【报Bug】在未播放video时设置seek导致bug。

分类:uni-app

详细问题描述

ios下打开页面时立刻调用video的seek函数,再点击视频播放画面会卡死。
在暂停状态下调用此函数也并不能马上更改视频轴的位置,只有再次点击播放才会发生变化。

IDE运行环境说明

[IDE版本号] 2.3.3.20190923

[mac版本号] 10.14.6 (18G95)

uni-app运行环境说明

ios 12.4.1
设备 ipad 2018

只测试了ios并不清楚安卓有没有问题

下面代码是在官方的video实例代码上添加了视频seek操作。

<template>  
    <view>  
        <page-head :title="title"></page-head>  
        <view class="uni-padding-wrap uni-common-mt" v-if="showVideo">  
            <view>   
                <video style="border-radius: 20upx; overflow: hidden;" id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"  
                 @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png"></video>  
            </view>  
            <!-- #ifndef MP-ALIPAY || MP-TOUTIAO -->  
            <view class="uni-list uni-common-mt">  
                <view class="uni-list-cell">  
                    <view>  
                        <view class="uni-label">弹幕内容</view>  
                    </view>  
                    <view class="uni-list-cell-db">  
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />  
                    </view>  
                </view>  
            </view>  
            <view class="uni-btn-v">  
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>  
            </view>  
            <!-- #endif -->  
        </view>  
    </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                title: 'video',  
                src: '',  
                danmuList: [{  
                        text: '第 1s 出现的弹幕',  
                        color: '#ff0000',  
                        time: 1  
                    },  
                    {  
                        text: '第 3s 出现的弹幕',  
                        color: '#ff00ff',  
                        time: 3  
                    }  
                ],  
                danmuValue: '',  
                showVideo: false  
            }  
        },  
        onReady: function(res) {  
            // #ifndef MP-ALIPAY || MP-TOUTIAO  
            this.videoContext = uni.createVideoContext('myVideo')  
            // #endif  
            var _this = this;  
            setTimeout(()=>{  
                _this.showVideo = true  

// 注意下面这行导致bug !!!!!!!!!!!  
                _this.videoContext.seek(10);  
            },350)  
        },  
        methods: {  
            sendDanmu: function() {  
                this.videoContext.sendDanmu({  
                    text: this.danmuValue,  
                    color: this.getRandomColor()  
                });  
                this.danmuValue = '';  
            },  
            videoErrorCallback: function(e) {  
                uni.showModal({  
                    content: e.target.errMsg,  
                    showCancel: false  
                })  
            },  
            getRandomColor: function() {  
                const rgb = []  
                for (let i = 0; i < 3; ++i) {  
                    let color = Math.floor(Math.random() * 256).toString(16)  
                    color = color.length == 1 ? '0' + color : color  
                    rgb.push(color)  
                }  
                return '#' + rgb.join('')  
            }  
        }  
    }  
</script>  

<style>  
    video {  
        width: 690upx;  
    }  

    .lessonVideoView {  
        margin: auto;  
        margin-top: 0upx;  
        margin-bottom: 15upx;  
        min-width: 200upx;  
        max-width: 100%;  
        height: 0;  
        padding-bottom: 53%;  
        background: #000;  
        overflow: hidden;  
        border-radius: 20upx;  
        border: 1upx solid #16a085;  
    }  
</style>  
2019-10-06 04:54 负责人:无 分享
已邀请:
CLP

CLP

seek api 只有播放时才会更改视频轴的位置。微信小程序也是这样的。

  • Javin (作者)

    那我跳转前线播放一下再暂停吧

    2020-01-19 00:06

5***@qq.com

5***@qq.com

请问微信h5现在解决这个问题没有,seek还是无效,initial-time也是没有效果

  • CLP

    联系前端同学

    2020-09-21 18:44

CLP

CLP

你不播放为啥要seek 。用这个试试,initial-time: (Number 类型 )视频初始播放位置
单位为秒(s)。 注意:仅在视频开始播放前设置有效。

  • Javin (作者)

    我做教育软件学生选择老师的评论视频必须直接跳到对应位置!而不是上来就给初始化位置!

    2020-01-16 19:03

  • CLP

    回复 Javin:你是说没播放就希望seek到某个时间点???

    2020-01-17 12:41

  • CLP

    安卓有这个问题吗

    2020-01-17 12:43

  • 春风拂过

    回复 CLP: 安卓没有问题,ios初始化时不能seek到某个时间点,点击播放直接回到0从头播放

    2020-10-09 09:28

  • 春风拂过

    回复 Javin: 大神你这个问题解决了吗?

    2020-10-12 08:57

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

HBuilderX 2.5.8+ 已修复

  • Jeff_fang

    在微信中打开 h5 进还是有这个问题

    2020-07-06 13:53

  • 春风拂过

    ios下打开H5调用seek还是不好使,点击视频播放从0开始播放没有从指定位置播放,在暂停状态下调用此函数也并不能马上更改视频轴的位置,只有再次点击播放才会发生变化

    2020-10-12 08:56

重庆金城武

重庆金城武 - 一个卑微前端

确实 微信h5 seek还是无效 动态赋值initial-time也无效

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