java 前端播放视频以及视频获取播放进度

港控/mmm° 2024-03-22 15:11 16阅读 0赞

<div class="shiping">
        <video id="video" class="video-js vjs-big-play-centered" controls="controls" poster="">
            <source src="/paper/questions/getVideo" type='video/mp4'>
        </video>
    </div>

<script>
        let elevideo = document.getElementById('video');
        elevideo.addEventListener('loadedmetadata', () => {
        
            //视频的总长度
            console.log('总长度:' + elevideo.duration);
            clearInterval(this.timer);
        });
        elevideo.addEventListener('play', () => {
        
            //播放开始执行的函数
            console.log('开始播放');
        });
        elevideo.addEventListener('playing', () => {
        
            //播放中
            console.log('播放中');
            this.timer = setInterval(() => {
                console.log('播放进度:' + parseFloat(elevideo.currentTime));
            }, 100);
        });
        elevideo.addEventListener(
            'ended',
            () => {
        
                //结束
                console.log('播放结束');
                clearInterval(this.timer);
            },
            false
        );
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 video 播放视频禁止拖动进度条

<video id="my-video" class="video-js vjs-big-play-centered" controls="controls" post

忘是亡心i/ 2024年03月22日 17:37/ 0 赞/ 136 阅读

相关 java 前端播放视频以及视频获取播放进度

<div class="shiping"> <video id="video" class="video-js vjs-big-play-centere

港控/mmm°/ 2024年03月22日 15:11/ 0 赞/ 17 阅读

相关 uniapp监听视频播放进度,完成视频试看操作

监听视频进度,完成视频试看功能前端监听视频播放进度,在试看结束后做一些操作 html: <!-- poster为视频封面,timeupdate为视频播放进

清疚/ 2023年03月13日 02:07/ 0 赞/ 40 阅读

相关获取video视频播放长度

方法1 <video :src="videoUrl" controls preload="auto" id="videoPlayer"></video>

末蓝、/ 2023年01月13日 01:37/ 0 赞/ 286 阅读

相关 java canvas类播放视频教程_canvas实现视频播放

Examples 点击播放 var imgArr = \[\], source = \{\}, now2 = 0, imgNum = 0, timer = null

╰+攻爆jí腚メ/ 2022年11月05日 00:39/ 0 赞/ 296 阅读

相关 Android 视频播放

一、xml布局文件 <VideoView android:id="@+id/videoView" android:layout_wid

秒速五厘米/ 2022年10月26日 03:59/ 0 赞/ 394 阅读

相关 JSP播放视频

以下代码直接放在<body></body>中在网站中插入media视频的代码- - <OBJECT id=WMP height=320 standby=Loadi

忘是亡心i/ 2022年06月16日 10:42/ 0 赞/ 391 阅读

相关 iOS 视频播放

1 AVPlayer (1) 优缺点优点:可以自定义 UI, 进行控制缺点:单纯的播放,没有控制 UI(进度,暂停,播放等按钮),而且如果要显示

灰太狼/ 2022年06月14日 02:27/ 0 赞/ 476 阅读

相关视频播放控制

html部分： <video src="../video/video6.mp4" width="1920" height="1080" autoplay loop prelo

柔情只为你懂/ 2022年05月29日 00:57/ 0 赞/ 277 阅读

相关视频播放组件

import React, \{Component\} from 'react'; import \{View, Dimensions, Image, Text, Slid

Bertha 。/ 2021年09月19日 13:48/ 0 赞/ 662 阅读