返回顶部
首页 > 资讯 > 前端开发 > 其他 >html5 video无法快进怎么办
  • 216
分享到

html5 video无法快进怎么办

videohtml5 2023-05-14 22:05:17 216人浏览 八月长安
摘要

本教程操作环境:windows10系统、HTML5版、Dell G3电脑。html5 video无法快进怎么办?<video> 标签快进不生效的解决:在H5项目中,使用<video>标签来播放视频,跳不过视频的快进播放,按照原生

html5 video无法快进怎么办

教程操作环境:windows10系统、HTML5版、Dell G3电脑。

html5 video无法快进怎么办?

<video> 标签快进不生效的解决:

在H5项目中,使用<video>标签来播放视频,跳不过视频的快进播放,按照原生提供的方法,来进行如下监听设置:

var vol = 0.1;  //1代表100%音量,每次增减0.1
var time = 2; //单位秒,每次增减10秒
 
 
function listenKeyboard() {
    var videoElement = document.getElementById("video");
    document.onkeyup = function (event) {//键盘事件
 
        var e = event || window.event || arguments.callee.caller.arguments[0];
 
        //鼠标上下键控制视频音量
        if (e && e.keyCode === 38) {
            console.log("音量加1");
            // 按 向上键
            videoElement.volume !== 1 ? videoElement.volume += vol : 1;
            return false;
 
        } else if (e && e.keyCode === 40) {
            console.log("音量减1");
            // 按 向下键
            videoElement.volume !== 0 ? videoElement.volume -= vol : 1;
            return false;
 
        } else if (e && e.keyCode === 37) {
            console.log("倒退1秒");
            // 按 向左键
            videoElement.currentTime !== 0 ? videoElement.currentTime = videoElement.currentTime -= time : 1;
            return false;
 
        } else if (e && e.keyCode === 39) {
            console.log("前进2秒,当前时间是:"+videoElement.currentTime+",视频长度是:"+videoElement.duration);
            // 按 向右键
            var currPlayTime = videoElement.currentTime ;
            if (currPlayTime !== videoElement.duration){
                var afterSetTime = currPlayTime + time ;
                console.log('afterSetTime should be :'+afterSetTime) ;
                videoElement.currentTime = afterSetTime ;
                console.log('afterSetTime is :'+videoElement.currentTime) ;
            }else {
                videoElement.currentTime = videoElement.currentTime + 1;
            }
            console.log("快进后的时间是:"+videoElement.currentTime);
            return false;
        } else if (e && e.keyCode === 32) {
            console.log("暂停");
            // 按空格键 判断当前是否暂停
            videoElement.paused === true ? videoElement.play() : videoElement.pause();
            return false;
 
        }
 
    }
}

每次快进时,视频会跳动到开始,重新进行播放。

后在想,视频每次播放,读取的文件流肯定不同,需要从文件对应的位置进行截取,类似于翻页一样,需要传递一个起始边界值,于是打印出request中传递的所有参数名称,但除了业务参数外,并没有其他更多的参数值。

后看到video发起请求时,会在head中有Range的属性,根据该属性值来获取到需要将视频定位的位置,需要在后台进行处理,具体代码如下:

        String rangeString = request.getHeader("Range");//如果是video标签发起的请求就不会为null
            if (StringUtils.isNotBlank(rangeString)){
                long range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));
                response.setHeader("Access-Control-Allow-Origin", "*");
                response.setHeader("Content-Type", "video/mp4");
                response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(file.getName() , "UTF-8"));
                int fileLength = (int)file.length() ;
                response.setContentLength(fileLength);//10000是视频文件的大小,上传文件时都会有这些参数的
                response.setHeader("Content-Range", String.valueOf(range + (fileLength-1)));//拖动进度条时的断点,其中10000是上面的视频文件大小,改成你的就好
                response.setHeader("Accept-Ranges", "bytes");
//            response.setHeader("Etag", "W/"9767057-1323779115364"");//上传文件时都会有这些参数的
                response.setHeader("Etag", "737060cd8c284d8af7ad3082f209582d");//上传文件时都会有这些参数的
            }

然后,debug时,就会发现每次重新定位video的播放位置,就会有新的请求过来,带有具体的播放时长范围。

有另外一个新的小问题,就是视频正在播放时,后台正在向前端输出文件流,此时重新设置时间,就会关闭原来的连接,这种连接关闭为非正常关闭,会报出中止连接的异常信息,这种无需处理,如果不太想看见这种异常提示,在catch中将异常屏蔽掉即可。

以上就是html5 video无法快进怎么办的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: html5 video无法快进怎么办

本文链接: https://lsjlt.com/news/206794.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html5 video无法快进怎么办
    本教程操作环境:Windows10系统、HTML5版、Dell G3电脑。html5 video无法快进怎么办?<video> 标签快进不生效的解决:在H5项目中,使用<video>标签来播放视频,跳不过视频的快进播放,按照原生...
    99+
    2023-05-14
    video html5
  • html5 video无法快进如何解决
    这篇文章主要介绍“html5 video无法快进如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html5 video无法快进如何解决”文章能帮助大家解决问题。html5 video无法快进的...
    99+
    2023-07-04
  • html5中video标签无法播放mp4怎么办
    这篇文章给大家分享的是有关html5中video标签无法播放mp4怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。问题分析手机录制的视频属性: 格式化工厂转码的视频...
    99+
    2024-04-02
  • HTML5中Video标签有部分MP4无法播放怎么办
    这篇文章主要为大家展示了“HTML5中Video标签有部分MP4无法播放怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5中Video标签有部分MP...
    99+
    2024-04-02
  • video下autoplay属性无效怎么办
    小编给大家分享一下video下autoplay属性无效怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!背景:video下载入ogg格式视频,并设置自动播放属性...
    99+
    2023-06-09
  • html5的video标签不能播放怎么办
    本教程操作环境:Windows10系统、HTML5版、DELL G3电脑html5的video标签不能播放怎么办?IOS-HTML5-Video标签不能播放h5的video标签 在UIwebview中无法播放,Safari可以,某些手机可以...
    99+
    2023-05-14
    video html5
  • HTML5的Video标签怎么用
    这篇文章主要介绍HTML5的Video标签怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! <video>标签的属性 复制代码 代码如下: src :视频的属...
    99+
    2024-04-02
  • HTML5的video事件怎么应用
    这篇文章主要介绍“HTML5的video事件怎么应用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5的video事件怎么应用”文章能帮助大家解决问题。 使...
    99+
    2024-04-02
  • HTML5中怎么实现video 事件
    HTML5中怎么实现video 事件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 1、获取视频时间长度 当视...
    99+
    2024-04-02
  • Html5中video标签怎么使用
    小编给大家分享一下Html5中video标签怎么使用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足...
    99+
    2023-06-09
  • HTML5的video标签怎么使用
    要使用HTML5的video标签,可以按照以下步骤进行操作:1. 首先,在HTML文档中添加video标签,如下所示:```html...
    99+
    2023-09-13
    HTML5
  • 怎么在Html5中使用video标签
    这篇文章将为大家详细讲解有关怎么在Html5中使用video标签,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。video标签行内属性src:视频的URLposter:视频封面,没有播放时显示...
    99+
    2023-06-09
  • 怎么解决html5中的video标签ios系统中无法播放使用的问题
    这篇文章主要介绍怎么解决html5中的video标签ios系统中无法播放使用的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!先是从前端的角度去考虑,如何让safari浏览器兼容video,并支持播放(未找到解决的...
    99+
    2023-06-09
  • ubuntu无法进入图形界面怎么办
    ubuntu无法进入图形界面的解决方法:在登录界面按【ctrl+Alt+F1】,在输入用户名密码进行登录。登录成功后切换到root用户,输入“startx”命令,好运即可进入图形界面。若出现多行错误,提示提示你/home/用户名/.Xaut...
    99+
    2024-04-02
  • Vista无法进入睡眠状态怎么办
    小编给大家分享一下Vista无法进入睡眠状态怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实际上这是个非常简单的问题,但是很多新手朋友们很困惑,睡眠也好,休...
    99+
    2023-06-14
  • win7无法进入安全模式怎么办
    小编给大家分享一下win7无法进入安全模式怎么办,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!方法一:打开“运行”窗口,输入“msconfig”命令进入系统配置策略界面。 切换到“引导”选项卡,勾选“安全引导”和...
    99+
    2023-06-27
  • Vista无法进入睡眠状态怎么办?
    问:请问为什么我的笔记本电脑无法进入睡眠状态呢以前刚装好Vista的时候能进入,后来不知道怎么回事,点击睡眠后就退出来,就是无法进入睡眠状态。   答:Vista仍然沿用了Windows xp的休眠机制,如果系统分区(通...
    99+
    2023-05-26
    vista 关闭睡眠 vista睡眠 睡眠 状态 Vista
  • Win8.1系统无法进入BIOS怎么办?Win8.1无法进入BIOS的解决方法
      Win8.1无法进入BIOS的解决方法: 1、进入控制面板,然后进入“硬件和声音”;   2、进入“硬件和声音”后再进入“电...
    99+
    2022-06-04
    解决方法 系统 BIOS
  • html5中视频媒体标签video怎么用
    这篇文章将为大家详细讲解有关html5中视频媒体标签video怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。video是HTML5的一个视频媒体标签,其作用是在网页中嵌入指定的视频,video标签的...
    99+
    2023-06-09
  • ubuntu18.04更新后无法进入系统怎么办
    ubuntu18.04更新后无法进入系统的解决方法。重启ubuntu18.04,在进入grub引导界面后,按E进入编辑页面。再页面中找到splash,其后按空格后输入“nomodeset”。输入后,按ctrl+x或F10保存后重新进入ubu...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作