请选择 进入手机版 | 继续访问电脑版

[问题求助] 关于video 组件指定视频初始播放位置的问题

[复制链接]
Not Foundcl 发表于 2021-12-27 18:39:05
本帖最后由 Not Foundcl 于 2021-12-28 10:41 编辑

为什么我设置了initial-time没反应呢,场景大概是这样的,播放(play()方法)视频暂停(stop()方法)后,当我点击某一个按钮传值initial-time=0,接着执行play()方法,视频是从暂停的地方继续播放的,为啥没有重新开始播放呢,安卓和IOS都是这样。

代码如下
<template name='tpl'>
    <view class="page">
        <safe-area class="header">
            <text class="header__title">测试</text>
        </safe-area>
        <scroll-view class="main">

            <button @click="play()">播放</button>
            <button @click="stop()">暂停</button>
            <button @click="again()">重播</button>
            <view class="videoBox">
                <video class="video" id="video" onplay={this.onplay} initial-time={initialtime} onpause={this.onpause}
                    onended={this.onended} src={kscBackmusic} poster={poster} controls="false"
                    onloadedmetadata={this.onloadedmetadata}>
                </video>
            </view>
        </scroll-view>
        <safe-area class="footer">

        </safe-area>

    </view>
</template>
<script>
export default {
    name: "tpl",
    apiready() {
        api.setStatusBarStyle({
            style: "light",
            color: "-"
        });
    },
    data() {
        return {
            initialtime: 0,
            kscBackmusic: 'http://**.**tran01-%E8%80%81%E5%B8%88%E7%9A%84%E5%BE%AE%E7%AC%91-YS-1080P720P.mp4',
            poster: '',
        };
    },
    methods: {
        //播放
        play() {
            var playobj = document.getElementById('video');
            playobj.play()
        },
        //停止
        stop() {
            var playobj = document.getElementById('video');
            playobj.pause()
        },
        //重新播放
        again() {
            this.data.initialtime = 0
            this.play()
        },
    }
};
</script>
<style>
.page {
    height: 100%;
    background-color: white;
}
.header {
    background: #81a9c3;
    justify-content: center;
    align-items: center;
}
.header__title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
}

.main {
    flex: 1;
    padding: 15px;
}
.footer {
    background: #81a9c3;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.footer__text {
    color: #fff;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
}
.videoBox {
    width: 100%;
    height: 200px;
    border: 1px solid #333;
}
.video {
    width: 100%;
    height: 100%;
}
</style>

















5条回复

技术支持-F 管理员 26299Y币
设置currentTime 看看
Not Foundcl 马路杀手 502Y币
currentTime也是没反应,还是从暂停的地方继续播
技术支持-F · 2021-12-28 10:52设置currentTime 看看
技术支持-F 管理员 26299Y币
稍等,我们排查一下。
技术咨询-Kenny 管理员 7696Y币
在设置属性值的时候,如果设置的值和当前值一样,此次更改就会被忽略。你可以用 currentTime,监听 ontimeupdate 事件,在事件回调里面给 currentTime 赋值。然后调用重播就会生效了。
Not Foundcl 马路杀手 502Y币
ok这样设置可以了,那文档上应该说明一下吧?不然也不懂有这个注意事项哦
技术咨询-Kenny · 2021-12-28 16:32在设置属性值的时候,如果设置的值和当前值一样,此次更改就会被忽略。你可以用 currentTime,监听 ontimeupdate 事件,在事件回调里面给 currentTime 赋值。然后调用重播就会生效了。 ...
您需要登录后才可以回帖 登录

本版积分规则