H5 video 标签播放视频记录播放进度

最新推荐文章于 2025-05-20 10:42:34 发布
转载 最新推荐文章于 2025-05-20 10:42:34 发布 · 9.5k 阅读 · 8

本文介绍了一个使用HTML5和JavaScript实现的视频播放器进度条案例，详细展示了如何通过监听视频的时间更新事件来实时更新进度条显示，以及如何将当前播放时间和总时长显示在页面上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<!DOCTYPE html>
<html>  
<head>    
<title>MyHtml.html</title>    
<meta name="decorator" content="ani"/>    
<meta name="keywords" content="keyword1,keyword2,keyword3">    
<meta name="description" content="this is my page">    
<meta name="content-type" content="text/html; charset=UTF-8">    
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  </head>  
<script src="${ctxStatic}/common/js/vendor.js"></script>
<body>      
    <video id="video-active" class="video-active" width="100%" height="600" controls="controls"><source src="${url}" type="video/mp4"></video>    
    <div id="current">当前时长：0:00</div>    
    <div id="duration">总时长：0:00</div>    
    <span id="pro"></span>    
    <div class="progress progress-striped active" style="width:100">        
        <span id="hyTime" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></span>           
    </div> 
    <span id="hy" ></span>         
<script type="text/javascript">            
$(document).ready(function(){                          
    $("#video-active").on("timeupdate",function(event){
        onTrackedVideoFrame(this.currentTime, this.duration);});
    });            
    
    function onTrackedVideoFrame(currentTime, duration){
         $("#current").text(currentTime);                
         $("#duration").text(duration);               
         var a=currentTime/duration;                
         var b=(a*100).toFixed(0)+"%";                
         document.getElementById('hyTime').style.width=b;                
         $("#hy").text(b);                
         if(currentTime==duration){                 
             $("#pro").text("(已完成)");                
             }            
         }        
</script>  
</body>
</html>

IT小白007
关注
h5 video视频播放的同时加水印，图片加水印同样的原理
qq_40985985的博客
06-05 8543
经常能看到播放视频的网站上加水印的效果，记录下成果以备后续看： h5 video 视频播放的同时动态加水印文本：和视频同一个页面，在其上边加类似蒙版，完美解决。 全屏情况下video 层级超高水印会消失，解决办法重写controls，把包含video，水印div的最外边的div全屏，完美解决；......
使用H5 video标签实现双视频同步播放
weixin_45759839的博客
03-17 2975
在同一页面实现大小视频同步播放（类似微信视频聊天效果） 效果描述：大小视频可以同步播放，大小视频可以切换，小视频可以自动判断隐藏与现实，实现全屏与退出全屏。 实现思路：在视频播放与暂停、卡住、快进的时候同步播放时间，利用样式来切换两个视频播放尺寸的大小，利用div可以全屏的API来实现全屏功能，最后手撸一个小视频拖拽（考虑全屏后退出全屏时小视频的位置问题使用right与bottom定位），大小视频...
h5player：网页播放器增强脚本，支持：播放进度记录，播放倍率记录，快进快退，倍速播放，画面缩放等
01-30
h5player为tampermonkey 网页播放器增强脚本项目地址： : 脚本安装地址： ://greasyfork.org/scripts/381682 特性 兼容广泛，所有存在视频标签的网页均支持甚至嵌在iframe，shadowdom下合理兼容 支持跨域控制，跨域限制页面下快捷键一样可以无缝衔接 支持多实例（如：twitter，instagram下也兼容） 支持播放进度记录 支持播放速度记录 支持视频画面缩放 支持画中画功能 支持跨Tab控制画中画 支持视频画面截图功能 支持配置式添加自定义功能 简介 HTML5视频播放增强脚本，支持所有H5视频播放网站，全程快捷键控制，支持：倍速播放/加速播放，视频画面截图，画中画，网页全屏，调节亮度，饱和度，数值，自定义配置功能增强等功能，提供良好的在线播剧体验 PS：本脚基于： 但已远超原脚本提供的功能。 由于之前作者已长期不维护，故接坑自己开干，在原作者的基础上进行了大幅度的代码改造，并采用了全新的项目架构进行开发，维护更加方便，逻辑更加清晰，功能更加强大，兼容更多网站 支持网站列表 本插件支持支持所有使用HTML5技术进行视频播
微信H5记录视频播放进度
weixin_33949359的博客
04-25 1431
需求： 微信端看视频，关闭微信的窗口时需要记录当前播放时间，下次在进入的时候从上次保存的进度开始播放 面临的问题： 监控微信离开页面 重新进入时候从上传保存的地方播放 设备环境:Iphone 6s 微信 处理： 监控离开 开始的时候使用onbeforeunload事件，发现微信端离开时并未调用记录进度的脚本改用 pagehide事件，...
构建现代网页中的H5视频播放器
最新发布
weixin_35728286的博客
05-20 1259
CSS3带来了众多改进和新特性，这使得开发者能够更轻松地实现复杂的视觉效果。其中一些关键特性包括：过渡（Transitions）：CSS过渡使得元素状态变化（如鼠标悬停、获得焦点、状态切换等）能够平滑过渡，提升了用户的交互体验。动画（Animations）：CSS动画允许无需JavaScript即可创建复杂的动画序列。变换（Transforms）：2D和3D变换可以用来缩放、旋转、倾斜和移动页面元素。弹性盒模型（Flexbox）
html5 video 统计播放时长
qq_21834227的博客
08-08 2645
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <!-- <script src="video.js" ></script> <sc...
potplayer 设置记住播放进度
洪晓鸿
09-23 4395
f5打开设置——播放——右下方 “记忆播放位置”
vue web视频播放的一个记录
Tiny2017的博客
03-16 352
1.播放器选择 1.dplayer 2.liveplayer（此处选择这个）liveplayer 2.安装 npm install --save-dev video.js npm install @liveqing/liveplayer npm install flv.js 3.liveplayer在vue中使用 3.1 复制依赖文件 安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0, 编辑你的 webpack.config.
vue中使用h5 video标签实现弹窗播放本地视频
老司机的后备箱
06-29 4395
在开发过程中主要涉及到以下几个需要关注的点父组件中使用.sync绑定visible属性，可直接在子组件中关闭弹窗更新父组件传入的visible值； 不过这样使用会导致每次重新打开视频弹窗进度条都会留在上一次打开的位置，所以需要在引用子组件外再嵌套一个div，利用v-if使其每次打开都重新渲染，从而解决进度条缓存的问题； 2. 本地视频资源路径的引入 需要播放的视频是项目中的静态资源，由于弹窗组件需要支持可复用，所以视频路径不可写死，下面示例为视频名称自定义； 如果视频不在src目录下，而是public目录
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放；Java视频流播放
01-16
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放，视频播放后才能操作其他内容。 内含Java视频流播放，本人并不建议直接将视频路径放到src中，而是使用视频流方式获取
h5 video 标签播放经过 java 使用 ws.schild( jave、ffmpeg ) 压缩后的 mp4 视频只有声音无画面的问题排查记录
heshiyuan1406146854的博客
07-05 619
【代码】h5 video 标签播放经过经过 java使用 ws.schild( jave、ffmpeg ) 压缩后的 mp4 视频只有声音无画面的问题排查记录。
H5中的flv播放器
04-26
在HTML5中通过使用flv.js来实现flv的播放器，可以实现暂停、开始等功能；如果flv是直播流，则可以播放直播流。
flv.js 测试demo (h5 video标签播放flv视频)
10-24
flv.js 测试demo 将整个文件夹放在web服务器目录下，可使用xampp搭建服务器，放在htdocs下，通过 http://localhost/flv 访问
flv格式视频播放插件
06-22
可以播放flv MP4 格式的视频
flv视频播放插件js 下载
02-07
整合使用文章请看 Bilibili视频代码开源flv.js的使用部署心得（代码实操） http://blog.youkuaiyun.com/hj7jay/article/details/54906612
H5 视频播放解决方案
weixin_34302561的博客
07-27 1076
前两天，美团推出的杨洋H5火爆朋友圈。里面主要的是多段视频播放、暂停。听起来很简单，但是由于腾讯白名单限制，在微信浏览器，qq浏览器，会自动将video标签中非腾讯域名的视频 ，自动全屏，结尾追加视频推荐。并且白名单申请入口已经关闭。 本文包含 全屏适配播放 并在视频上放置其他元素。例如下载按钮。 苹果手机 嵌入视频小窗播放。 目前替...
H5简单实现视频播放历史定位
KatsuraK的博客
11-25 2914
html &lt;video id="Video" controls autoplay controlsList="nodownload"&gt; &lt;/video&gt; js $('#Video').on("loadedmetadata", function () {//获取视频资源长度 /*obj表示服务端返回的视频数据对象，服...
实现video视频播放记录当前播放进度，下次播放时从上次播放进度开始播放
huaweichenai的博客
01-27 8718
今天接到一个需求，要求用户播放视频时，退出后下次再次播放此视频时需要从上次播放的进度开始播放，这里我们使用到了video标签的currentTime属性(设置或返回音频/视频中的当前播放位置（以秒计）)以及timeupdate方法(当目前的播放位置已更改时触发) 例： 1：html <videosrc="视频地址"controls="controls"autoplay="autoplay"width="92%"></video> 2：js varmyvideo...
html5+js制作自己的视频控件(实现弹幕效果，拖动进度条，播放时间) 一
qq_44771388的博客
04-10 5560
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
video标签视频播放进度
08-21
video标签中的视频播放进度可以通过JavaScript来控制和获取。可以使用video元素的currentTime属性来获取或设置当前的播放时间（以秒为单位）。通过监听video元素的timeupdate事件，可以实时获取视频播放的进度并更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值