zoukankan      html  css  js  c++  java
  • html5中嵌入音频和字幕

    在网页中嵌入音频:

    用audio元素

    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<audio src="img/e.mp3" controls>
    		非常抱歉
    	</audio>
    </body>
    </html>
    

    track元素:

    添加字幕,

    WebVVT:

    互联网视频文本轨道格式,根据该格式编写的文本文件,可以根据不同的需求来显示各种不同样式的字幕,编写字幕文件,文件后缀为.vtt。用小时、分钟、秒和毫秒来标记字幕的位置。

    .vtt文件编写样例:

    WEBVTT
    
    00:00:01.000 --> 00:00:02.000
    Never drink liquid nitrogen.
    
    00:00:02.000 --> 00:00:03.000
    第一个
    
    00:00:01.102 --> 00:00:11.234
    这就是抛瓦!
    
    00:00:04.100 --> 00:00:05.100
    零之力
    
    00:00:06.100 --> 00:00:07.100
    第二个
    
    00:00:08.000 --> 00:00:09.000
    哈哈哈哈哈哈哈
    
    00:00:10.100 --> 00:00:11.100
    第三个
    
    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<video src="img/f.mp4" width="544px"  controls >
    		<track src="track.vtt" srclang="zh" label="中文字幕" kind="subtitles" default >
    		非常抱歉
    	</video>
    </body>
    </html>
    

    source元素:

    可以添加多个视频格式作为src

    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<video controls>
    		<source src="a.mp4" type="video/mp4">
    		<source src="b.ogv" type="video/mp4">
    		<source src="c.webm" type="video/mp4">
    		非常抱歉
    	</video>
    </body>
    </html>
    
  • 相关阅读:
    消费RabbitMQ时的注意事项,如何禁止大量的消息涌到Consumer,保证线程安全
    消费RabbitMQ时的注意事项,如何禁止大量的消息涌到Consumer,保证线程安全
    scrollTop值为0等疑难杂症
    9.四平方和
    8.冰雹数
    7.搭积木
    6.凑算式
    5.分小组
    4.骰子游戏
    3.平方怪圈
  • 原文地址:https://www.cnblogs.com/fate-/p/14419349.html
Copyright © 2011-2022 走看看