时间戳

首页 > 解决方案 > HTML 视频 currentTime 未正确设置

javascript - HTML 视频 currentTime 未正确设置

问题描述

我有一个视频被用作移动设备的背景，以显示手机旋转时的反应动画（有点），但是当旋转需要它从头到尾循环或从头到尾循环时，它不会循环而且我不知道为什么它试图设置的值应该有效。

这是订阅陀螺仪并用一些数学更新角度的函数

    this.gyroscope.watch(this.options)
    .subscribe((orientation: GyroscopeOrientation) => {
        // need delta time to correctly calculate angle per update
        this.time.now = new Date().getTime();
        this.time.delta = this.time.now - this.time.last;

        if (this.videoLoaded) {

            // convert radians/sec to degree/sec and times by deltaTime
            const degree = 180 / Math.PI * orientation.z;
            this.targetAngle -= (this.time.delta / 1000) * degree;

            // lerp target angle no clipping applied
            this.angle = (1 - .1) * this.angle + .1 * this.targetAngle;

            // convert lerped angle into clipped 0-360
            let displayAngle = this.angle % 360;
            if (displayAngle < 0) { displayAngle = 360 + displayAngle; }

            // convert angle to time of video round to tenths dec
            this.frame = Math.round((displayAngle * this.axeVideo.duration / 360) * 10) / 10;

            // set video time
            this.axeVideo.currentTime = this.frame;
        } else {
            // clear angle as gyro spits out large values at first
            this.angle = this.targetAngle = 0;
        }
        // update last time for deltaTime calc
        this.time.last = this.time.now;
    });

这都是正确的数学并且在逻辑上有效但是在测试视频时无论手机旋转多少次都会锁定并“解锁”它我必须将手机旋转回相同的量。

问题记录的屏幕截图有点滞后，但通常超级流畅（因此我使用此解决方案）。

标签： javascriptangularionic4

解决方案

它ion-range上面有 [(ngModel)] 覆盖了设定的时间。

推荐阅读