时间戳

首页 > 解决方案 > Ionic ng用于视频播放

html - Ionic ng用于视频播放

问题描述

我试图从离子组件中的 ts 开始视频，但如果我调用 video.play() 视频会重新创建，我想。

我的html代码

                        <video
                            poster="https://images.unsplash.com/photo-1545486332-9e0999c535b2?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmxhY2t8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80"
                            [class.blur]="asset.isHide && !asset.isSave" [attr.id]="'fullscreen-video' + i" #video
                            (click)="playPause(video)">
                            <source [src]="asset.url" type="video/mp4">
                            Sorry, your browser doesn't support embedded videos,
                            but don't worry, you can download it
                            and watch it with your favorite video player!
                        </video>

我的ts代码

public playPause(video: HTMLVideoElement): void {
    if (video.paused === true) {
        video.play();
        this.isPlay = true;
    } else {
        this.isPlay = false;
    }
}

仅在调试模式下检测到的错误：executeListenerWithErrorHandling

出现该错误后，将重新创建 html 中的视频元素

标签： htmlangulartypescriptionic-framework

解决方案

您应该通过 Id: 获取视频元素。

html:

<video
    poster="https://images.unsplash.com/photo-1545486332-9e0999c535b2?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmxhY2t8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80"
    [class.blur]="asset.isHide && !asset.isSave" [attr.id]="'fullscreen-video' + i" #video (click)="playPause($event, 'fullscreen-video' + i)" controls="false">
    <source [src]="asset.url" type="video/mp4">
    Sorry, your browser doesn't support embedded videos,
    but don't worry, you can download it
    and watch it with your favorite video player!
</video>

.ts：

playPause($event, id) {
    let myVideo: any = document.getElementById(id);
    if (myVideo.paused) {
        myVideo.play();
    }
    else {
        myVideo.pause();
    }
}

推荐阅读