代码

<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

	<video id="video" src="t_1234567.mp4" width=50% autobuffer controls type="video/mp4"></video>

	<p>选择播放速率：<select id="selRate">

		<option value="0.5">0.5</option>

		<option value="1" selected>1.0</option>

		<option value="1.25">1.25</option>

		<option value="1.5">1.5</option>

		<option value="2">2.0</option>

		<option value="5">5.0</option>

	</select></p>

	<p><button id="btnPlay">视频播放</button></p>

	  <script>

		var eleSelect = document.getElementById('selRate');

		var eleButton = document.getElementById('btnPlay');

		// 视频元素

		var video = document.getElementById('video');

		// 改变播放速率

		eleSelect.addEventListener('change', function () {

			video.playbackRate = this.value;

		});

		// 点击播放按钮

		eleButton.addEventListener('click', function () {

			video.pause();

		});

	</script>

 </body>

</html>

[html][js]视频倍速播放功能的更多相关文章

  1. MOOC网视频下载并视频倍速播放，超简单哒，亲测可用，( •̀ ω •́ )y

    由于视频在线播放太卡,想着下载看吧~~可是这个坑爹的网站没有下载按钮,难道就不可以下载视频了吗? 小白不甘心~ 于是动手查了一下,实验很成功,估计如果会爬虫的都不用像我一样一个一个自己去下了,奈何我知 ...

  2. Android MediaPlayer 在 6.0 以上版本使用倍速播放功能说明

    Android MediaPlayer 在API 23即6.0版本开始支持倍速播放,下面我们来介绍一下如何使用MediaPlayer进行倍速播放. 一.核心接口 MediaPlayer.setPlay ...

  3. Windows及Android倍速播放视频软件下载

    目录 1. 更多推荐 2. 关键字 3. 按 4. 软件下载 4.1. IOS应用商店 4.2. 网盘下载 5. 软件介绍 5.1. PotPlayer(Windows) 5.2. MoboPlaye ...

  4. PC端有什么好用的倍速播放的软件?

    倍速播放的目的是让自己可以以更快的速度去看视频, 加快获取信息的效率 potplay吧,和KMP是一个作者.加速播放快捷键是c,减速时x,z恢复正常.下载官网 Global Potplayer

  5. Android MediaPlayer 音频倍速播放，调整播放速度

    本文链接: Android MediaPlayer 倍速播放,调整播放速度 现在市面上的很多音视频App都有倍速播放的功能,例如把播放速度调整为0.5.1.5.2倍等等. 从Android API 2 ...

  6. Mac 上 QuickTime Player 播放器以 1.1、1.2 倍速等更精确速度快进/快退播放的方法

    苹果的 QuickTime Player 播放器上点击双箭头按钮可以用 2.4.8 倍的速度快进/快退播放视频,但是 2 倍速太快了,如果我想以 1.1.1.2 倍速这种更精确的速度控制视频播放呢?按 ...

  7. zw·10倍速大数据与全内存计算

    zw·10倍速大数据与全内存计算 zw全内存10倍速计算blog,早就在博客园机器视觉栏目发过,大数据版的一直挂着,今天抽空补上. 在<零起点,python大数据与量化交易>目录中 htt ...

  8. 开源播放器 ijkplayer (二) ：ijkplayer倍速变调问题解决方案

    转载注明出处:http://www.cnblogs.com/renhui/p/6510872.html 之前使用IjkPlayer做播放器的使用的时候,在做倍速播放的时候,发现播放的声音音调明显变高了 ...

  9. mac 倍速播放

    Mac的倍速播放,使用工具播放是quick time player,使用方式是,按住 “option” + “>>” 即可调整倍数:

随机推荐

  1. 旧版flexbox局部填坑

    本来昨晚要写一篇react的小笔记,恰好同学小聚的时候附近有个ios维修,把我的4s拿去修好,早上用我还是ios5.1系统的4s打开自己的页面,发现flexbox布局的部分是乱的,眼前一黑. what ...

  2. pyhton中的深浅copy

    深浅拷贝:数据分离情况 1. =赋值:数据完全共享(指向内存中的同一个对象)被赋值的变量指向的数据和原变量的数据都是指向内存中的同一个地址: (1)如果是不可变数据类型(数字.字符串等),修改其中的一 ...

  3. Django模板之模板变量过滤器

    在Django的模板语言中,通过使用 过滤器 来改变变量的显示:Django的模板语言中提供了大约六十个内置过滤器. 过滤器规则: ·         过滤器的语法: {{ value|filter_ ...

  4. JMM_Java内存模型

    一.什么是 JMM JMM : Java 内存模型,它并不实际存在,是一种概念,一种约定! 作用 :主要是定义了 线程 与 主内存 之间存取数据的一些规则,进行一定的约束. 二.关于 JMM 的约定 ...

  5. 基于腾讯云搭建squid代理服务器

    本文主要介绍下在腾讯云上搭建squid代理服务器,用于访问国外网站或者为爬虫提供代理ip,以及简单介绍下如何基于腾讯云提供的SDK,批量开启或者销毁代理服务器实例. Squid是一个高性能的代理缓存服 ...

  6. Web前端：2、盒模型的组成

    在HTML中,若想要实心划分区域,则:1.添加标签:2.对标签设置尺寸(宽高) 但只要是添加了一个元素(标签),就会在页面中生成一个盒子,不同元素产生的盒子模型可能不同,这取决于它CSS的displa ...

  7. Magicodes.SwaggerUI 已支持.NET Core 3.1

    Magicodes.SwaggerUI 通过配置文件简单配置即可快速完成SwaggerUI的配置,包括: SwaggerUI的文档信息 API分组 API隐藏 API JSON生成(枚举.API架构I ...

  8. 解决docker创建的elasticsearch-head容器不能连接elasticsearch等问题

    在使用docker创建elasticsearch-head容器去连接elasticsearch的时候,容易出两个问题 1.不能连接elasticsearch 修改elasticsearch.yml文件 ...

  9. [Python基础]005.语法(4)

    语法(4) 类 创建 self 方法 变量 综合例子 继承 类 创建 与其他大部分语言一样,Python也用 class 来创建类. class Person: # Person类 pass # 空语 ...

  10. 面试题：我们重写一个对象的时候为什么要同时重写hashcode()和equals（）方法

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 在创建的类不重写hashCode()和equals() 方法时,默认使用 java 提供的 java.l ...