使用JavaScript控制<video>视频播放

系列文章目录


文章目录

  • 系列文章目录
  • 前言


前言

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。
在这里插入图片描述


HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 标签用于音频内容,但是 元素可能在用户体验上更合适。

在不支持 video 元素的浏览器中, 标签中间的内容会显示,作为降级处理。
在这里插入图片描述
controls属性

加上这个属性,浏览器会在视频底部提供一个控制面板,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

具体参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

这里不使用controls直接使用JS来控制视频的播放和暂停等功能。

实现功能如下:

(1)可以播放,暂停,停止视频。

(2)可以改变播放速度(2倍速度加速播放,一半的速度慢速播放,正常速度播放)

(3)播放时有进度条,同时还能显示已播放时间。

(4)通过改变SRC改变播放的视频内容

代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>视频播放控制</title>
</head>
<style>#durationBar{border:solid 1px #164900;width:450px;margin-bottom:5px;}#positionBar{height:20px;color:white;font-weight:bold;background:#2D9900;text-align:center;}
</style><script>//播放function play(){var video = document.getElementById("videoPlayer");video.play();}//暂停function pause(){var video = document.getElementById("videoPlayer");video.pause();}//停止function stop(){var video = document.getElementById("videoPlayer");video.pause();video.currentTime = 0;}//快放function speedUp(){var video = document.getElementById("videoPlayer");video.play();video.playbackRate = 2;}//慢放function slowDown(){var video = document.getElementById("videoPlayer");video.play();video.playbackRate = 0.5;}//正常速度function normalSpeed(){var video = document.getElementById("videoPlayer");video.play();video.playbackRate = 1;}//进度条相关function progressUpdate(){var video = document.getElementById("videoPlayer");//动态设置进度条var postionBar = document.getElementById("positionBar");postionBar.style.width = (video.currentTime / video.duration * 100) + "%";//设置播放时间displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + "秒";}function btnChangeA(){const video = document.getElementById('videoPlayer');video.src = 'test.mp4';video.load();video.play();}function btnChangeB(){const video = document.getElementById('videoPlayer');video.src = 'test2.mp4';video.load();video.play();}
</script><body><video controls id="videoPlayer" width="450px" height="300"ontimeupdate="progressUpdate()"></video><div id="durationBar"><div id="positionBar"><span id="displayStatus">0</span></div></div><button id="btnChange" onclick="btnChangeA()">播放A</button><button id="btnChange" onclick="btnChangeB()">播放B</button>&nbsp;&nbsp;<button onclick="play()">播放</button><button onclick="pause()">暂停</button><button onclick="stop()">停止</button>&nbsp;&nbsp;<button onclick="speedUp()">快放</button><button onclick="slowDown()">慢放</button><button onclick="normalSpeed()">正常</button>
</body>
</html>

其他说明:

要控制视频从指定时间开始播放,可以使用video元素的currentTime属性。

currentTime属性表示视频当前播放的时间(以秒为单位),可以设置该属性来控制视频从指定时间开始播放。

例如,如果要从视频的第10秒开始播放,可以使用以下代码:

const video = document.getElementById(‘myVideo’);

video.currentTime = 10;

然后,调用video元素的play()方法开始播放视频

poster属性,用于指定视频的预览图

视频无法自动播放

autoplay属性失效

HTML5标准规定:video标签设置autoplay属性后,当页面加载完成时,媒体资源将自动开始播放。

然而,在实际开发过程中发现,给video标签设置autoplay属性,在很多移动设备的浏览器中是无法实现自动播放的。

在iphone上做测试,发现autoplay属性在safari里无效、在微信里有效。

查看苹果开发者中心的文档,发现苹果对video标签的autoplay属性做了如下规定:

In Safari on iOS (for all devices, including iPad),

where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.

因此,在ios系统的safari浏览器中设置autoplay是无效的;

此外很多安卓机浏览器也采用了禁用autoplay的策略。

调用play()方法无效

继续在iphone上做测试,在页面加载完成后调用play()方法,尝试实现自动播放的效果。

发现在safari里视频没有播放,在微信里视频开始播放。

苹果开发者中心的文档同样对ios设备上的safari浏览器中,play()方法的触发时机做了规定:

No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback,

unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad=“play()” event does not.

也就是说,在safari里,需要把play()方法绑定到用户交互事件(eg.onclick,ontouchstart),当用户交互事件触发时,play()才会执行。

如果把play()方法绑定到非用户交互事件(eg.onload),该事件被触发时play()不会被执行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/767262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

并查集 笔记

并查集 并查集&#xff08;Disjoint-Set&#xff09;是一种树型的数据结构&#xff0c;用于处理不相交集合的合并和查询问题。 例如&#xff1a;给定一个图&#xff0c;问两个点是否在同一棵树上 若使用暴力查找的话需要遍历许多元素时间复杂度可以达到 O ( n ) O(n) O(n) …

C# DataTable Access数据库读取数据排序1,11,12,13……2,21,22……

例子 共有52行记录的数据表MyTable的列Letter&#xff08;数据是可能由数字打头的字符串&#xff09;数据如下&#xff1a; 0.A 1.B 2.C 3.D …… 9.J 10.K 11.L 12.m 13.N …… 19.T 20.U 21.V 22.W 23.X …… A B C D …… W X Y Z 如果直接使用…

每日一题 --- 移除链表元素[力扣][Go]

移除链表元素 题目&#xff1a;203. 移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xf…

java 并发工具的使用

并发工具的使用 Thread 和Runnable 创建新的线程 synchronized 实现同步 wait 和 notify 支持线程通讯 应对多核系统的Fork/Join框架 并发API包 java.util.concurrent 同步器 同步线程间高级的通信方法 Semaphore 实现了经典信号量 信号量通过计数器控制对共享信号量…

Java——抽象类和接口

目录 1.抽象类 1.概念: 2.语法 3.特性 2.接口 1.概念 2.语法 3.特性 1.抽象类 1.概念: 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的…

ClickHouse部署安装

准备工作 确定防火墙处于关闭状态 CentOS取消打开文件数限制 在hadoop102的 /etc/security/limits.conf文件的末尾加入以下内容 注意&#xff1a;以下操作会修改 Linux 系统配置&#xff0c;如果操作不当可能导致虚拟机无法启动&#xff0c;建议在执行以下操作之前给…

sentinel中StatisticSlot数据采集的原理

StatisticSlot数据采集的原理 时间窗口 固定窗口 在固定的时间窗口内&#xff0c;可以允许固定数量的请求进入&#xff1b;超过数量就拒绝或者排队&#xff0c;等下一个时间段进入, 如下图 时间窗长度划分为1秒 单个时间窗的请求阈值为3 上述存在一个问题, 假如9:18:04:…

2024年C语言最新经典面试题汇总(11-20)

C语言文章更新目录 C语言学习资源汇总&#xff0c;史上最全面总结&#xff0c;没有之一 C/C学习资源&#xff08;百度云盘链接&#xff09; 计算机二级资料&#xff08;过级专用&#xff09; C语言学习路线&#xff08;从入门到实战&#xff09; 编写C语言程序的7个步骤和编程…

【LLM多模态】Cogvlm图生文模型结构和训练流程

note Cogvlm的亮点&#xff1a; 当前主流的浅层对齐方法不佳在于视觉和语言信息之间缺乏深度融合&#xff0c;而cogvlm在attention和FFN layers引入一个可训练的视觉专家模块&#xff0c;将图像特征与文本特征分别处理&#xff0c;并在每一层中使用新的QKV矩阵和MLP层。通过引…

【小黑子szy】去除重复数字(集合set)

题目描述 给你N个数&#xff08;n&#xff1c;&#xff1d;&#xff11;&#xff10;&#xff10;&#xff09;,每个数都在&#xff08;0~1000&#xff09;之间&#xff0c;其中由很多重复的数字&#xff0c;请将重复的数字只保留一个&#xff0c;并将剩下的数由小到大排序并输…

Spring Boot的静态资源自动配置原理

当一个Spring Boot应用程序启动时&#xff0c;它会自动配置一个默认的ResourceHandlerRegistry&#xff0c;用于处理静态资源的映射和访问。这个ResourceHandlerRegistry会扫描特定的目录&#xff0c;比如/META-INF/resources、/resources、/static和/public&#xff0c;并将这…

01. 如何配置ESP32环境?如何开发ESP32?

0. 前言 此文章收录于《ESP32学习笔记》专栏&#xff0c;此专栏会结合实际项目记录作者学习ESP32的过程&#xff0c;争取每篇文章能够将细节讲明白&#xff0c;会应用。 1. 安装IDE&#xff1a;Thonny 后续项目中我们都是使用pythont语言&#xff0c;而thonny工具能很好的支撑E…

DFT应用:频谱分辨率和频率估计

目录 一、什么是频谱分辨率 1. 关于矩形窗函数 2. 分析余弦信号频谱 3. 频谱分辨率的定义 4. 如何提高频谱分辨率 二、关于频率估计 一、什么是频谱分辨率 1. 关于矩形窗函数 当k1时&#xff0c;主瓣宽度就是2x&#xff0c;能量主要集中在主瓣部分&#xff0c;频谱泄露…

VUE3状态管理库:Pinia的安装与使用

一、简介 Pinia 是 Vue 的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态。 二、安装 npm install pinia 在main.js中创建实例 import { createApp } from vue import { createPinia } from pinia import App from ./App.vueconst pinia createPinia() const a…

【C语言数据结构】排序

1.排序的概念 在深入研究各个排序算法之前&#xff0c;首先&#xff0c;我们要对排序有个大概的了解&#xff0c;即与排序相关的一些概念 Q&#xff1a;什么是排序&#xff1f; A&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小…

mybatis-插件使用手册

mybatis-插件详解 基本原理 使用了JDK动态代理&#xff0c;基于 interceptor 实现 public class Plugin implements InvocationHandler {private final Object target;private final Interceptor interceptor;private final Map<Class<?>, Set<Method>> …

如何实现跨标签页通讯

什么是跨标签页通讯 同一浏览器&#xff0c;可以打开多个标签页&#xff0c;跨标签页通讯就是&#xff0c;一个标签页能够发消息给另一标签页。 有哪些实现方案 localStorage &#xff08;window.onstorage事件监听&#xff09;BroadcastChannel&#xff08;广播&#xff09…

【积累】list

List 一个list转为二维数组&#xff0c;五个一组 List<List<String>> lists Lists.partition(list,5);删除list中的元素 删除下标以及定位到遍历的位置 for(int i 0, len list.size(); i < len; i){ if(list.get(i) 1){ list.remove(i); len--;i--;} …

C语言经典算法-9

文章目录 其他经典例题跳转链接46.稀疏矩阵47.多维矩阵转一维矩阵48.上三角、下三角、对称矩阵49.奇数魔方阵50.4N 魔方阵51.2(2N1) 魔方阵 其他经典例题跳转链接 C语言经典算法-1 1.汉若塔 2. 费式数列 3. 巴斯卡三角形 4. 三色棋 5. 老鼠走迷官&#xff08;一&#xff09;6.…

pytest框架的封装以及用例管理框架

pytest框架的封装以及用例管理框架 公共类统一封装requests_util02.pytest_api01.py 自动化测试的基础自动化测试的介入点自动化测试和手工测试占比自动化实施过程 pytest元素定位元素定位查找元素定位的方式通过 ID 定位通过 Name 定位通过 Class Name 定位通过 Tag Name 定位…