HTML5视频与音频_HaanLen的博客-程序员秘密

技术标签： HTML5

HTML5的video元素

1、使用video标记插入视频

<video src="url" controls="controls">替代文字</video>

video标记常用属性及说明

在这里插入图片描述

2.、video元素的访问控制

video元素重要的方法和事件。调用这些方法和事件可以访问和控制video对象。

video标记常用方法和事件

在这里插入图片描述

例子

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
		</style>
	</head>
	<body>
		<div>
		<video id="video1" autoplay="autoplay" controls="controls">
			<source src="../source/立方体.mp4"></source>
		</video>
		</div>
		<button id="btn" onclick="playpause()">播放/暂停</button>
		<button id="btn" onclick="makebig()">大</button>
		<button id="btn" onclick="makecenter()">中</button>
		<button id="btn" onclick="makesmall()">小</button>
		
	</body>
	<script>
		var video=document.getElementById('video1');
		var btn=document.getElementById('btn');
		function playpause(){
     
			if (video.paused) 
 				 video.play(); 
			else 
  				video.pause(); 
		}
		function makebig(){
     
			video.width=800;
		}
		function makecenter(){
     
			video.width=600;
		}
		function makesmall(){
     
			video.width=400;
		}
	</script>
</html>

HTML5的audio元素

1、使用audio标记插入音频

<audio src="url" controls="controls">替代内容</audio>

audio标记的常用属性、取值及说明

在这里插入图片描述

2.、audio元素的访问控制

通过单击按钮触发对象的play()方法和pause()方法实现播放状态的改变；

音量和静音控制则是通过修改对象的volume属性和muted属性实现。

使用track元素添加字幕

1、使用track标记插入字幕文件

track元素是video元素的子元素，

标记必须被书写在 video元素的开始标记与结束标记之间。

track标记的常用属性及说明

在这里插入图片描述

2、建立WebVTT文件

track元素引用的文件是内部包含了一系列时间标记的文本文件，WebVTT文件是可以添加到轨道中的视频播放器可以显示的文本文件。

在 HTML5中通过标记引用WebVTT文件，这表示可以为音频或视频等媒体资源提供诸如字幕、标题或描述等信息，并将这些信息同步显示在媒体资源中。

（1）WebVTT文件格式

WebVTT (Web Video Text Tracks)是一种文件格式，本质上是是一种文本文件，使用UTF-8编码，文件扩展名为.vtt。

（2）WebVTT标记

WebVTT文件内容由一些WebVTT标记组成，标记之间用行分隔符分开。用户可以在WebVTT标记中书写字幕与字幕应用的时间范围。

（3）使用Video
Caption Maker生成WebVTT文件

为媒体添加字幕的关键是构建WebVTT轨道文件。WebVTT文件可以手动创建，也可以使用创作工具构建。如果手工创建文件，写代码非常麻烦，并且字幕与媒体的同步需要反复测试修改。

HTML5视频字幕制作工具是一个简单有效的工具，该工具可以用于创建 WebVTT文件。

本文链接：https://blog.csdn.net/weixin_40119412/article/details/103324803

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

《数字图像处理》DFT（离散傅里叶变换）及HF（同态滤波）的实现_对图像进行dft变换并置其不同区域内的系数为零_三丫丫哦的博客-程序员秘密

DFT及HF的实现1 DFT（离散傅里叶变换）的实现1.1 DFT（离散傅里叶变换）的定义及原理对于基于图像的傅里叶变换(二维离散傅里叶变换)的过程如下：首先对于每一行都做一维的傅里叶变换，然后对于每一列做一维的傅里叶变换。具体来说，先对于第1行的N个点做傅里叶变换（实部有值，虚部为0），将变换输出的实部放回原来第1行的实部，将输出的虚部放回第1行的虚部，这样计算完成全部的行之后，图像的实部和虚部包含的是中间数据，然后用相同的办法进行列方向上的相同的傅里叶变换，这样大小为MN的图像经过DFT就得到了一

构造函数析构函数是否为虚函数_构造函数和析构函数可以是纯虚函数么?_yanerhao的博客-程序员秘密

1 构造函数不能为虚函数，原因主要如下虚函数的调用需要虚函数表指针，而该指针存放在对象的内容空间中。内存空间需要构造函数完成初始化；若构造函数声明为虚函数，那么由于对象还未创建，还没有内存空间，更没有虚函数表地址用来调用虚函数——构造函数了。2 析构函数可以为虚函数首先析构函数可以为虚函数，而且当要使用基类指针或引用调用子类时，最好将基类的析构函数声明为虚函数，否则可以存在内存

Ublox ZED-F9P 厘米级定位模组开箱评估_TopSemic嵌入式的博客-程序员秘密

最近因为工作需要，在评估Ublox的ZED-F9P高精度定位模组，该模组定位精度号称厘米级，从官方的数据手册看，在RTK条件下，定位精度高达1cm，这个感觉还是挺牛的，因为目前还没有听到一个小模组就能实现这么高的定位精度。于是从代理商那里借了一个该模组的开发板，官方链接：https://www.u-blox.com/en/product/c099-f9p-application-board...

查看linux的ssh服务信息及运行状态_查看ssh状态_旋律_BOOM的博客-程序员秘密

下面列举一些关于linux查看ssh服务的常用命令rpm -qa | grep ssh 可以看到系统中ssh安装包 ps -ef | grep ssh查看ssh服务有没有运行,如果有,可以看到类似以下内容:root 2659 1 0 18:31 ? 00:00:00 /usr/sbin/sshdroot 2702 2618 0 18:38 pts/0 00:00

android 抽屉式布局的使用_Anthonybuer的博客-程序员秘密

1.首先定义主布局 &lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android....

async/await/Promise以及js中的微任务和宏任务之间的关系_await是微任务_金刚葫芦瓢9527的博客-程序员秘密

宏任务与微任务同步和异步任务分别进入不同的执行"场所"，同步的任务进入主线程，异步的进入Event Table并注册函数。当异步函数完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循环)。除此之外，在js中还存在宏任务和微任务。js中的宏任务一般是：包括整体代码script，setTimeout，setInterval。微任务是：Pro