江苏龙网

  1. 主页 > 生活百科 > >

HTML中嵌入视频和音频代码( 二 )

html


你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在Opera浏览器上又刷新一下，只有美女冲着我微笑，视频还是没播放出来 。唉，太粗心了，忘记添加播放视频的控件了 。
在video标签中，通过添加controls 属性来为视频添加播放控件，方便用户执行播放、暂停操作和音量控制 。
<video poster = "img/beauty.jpg" controls>
（此处略去500字…）
</video>
在Opera浏览器上又刷新一下，效果真的不一样，这次不仅看到美女，还看到了视频控件 。用鼠标猛戳一下那个播放按钮，哈哈，不错，真的听到美妙的旋律 。我们的ogg文件，终于播放出来了，让我们好好享受一下吧O(∩_∩)O 。
听了一会，忽然一想，不对呀，我刚才点了播放按钮后，等了半天才听到声音 。能不能我一点播放按钮，就立即播放呢？
原来视频也是需要下载缓存的，点击播放按钮后，首先缓存，然后才播放的 。那能不能在页面加载的同时就缓存呢 。这样，用户点击播放后，就不必等待了 。
这当然可以，在video标签中，通过添加preload属性来为视频添加预加载功能，在页面加载的同时加载视频 。
<video poster = "img/beauty.jpg" controls preload>
（此处略去500字…）
</video>
关于 preload 属性，稍微再啰嗦一点，就是可以把它设置为 metadata，让浏览器仅仅预加载视频的基本信息，如尺寸、时长、以及一些关键的帧 。这样的话，在开始播放之前，浏览器可以提前计算视频的显示尺寸 。
既然一切都OK了！让我们看看mp4是不是能正常播放 。下载最新版的google Chrome 38.0浏览器，打开网页，猛戳一下播放按钮 。
等等~，等等~，不对，怎么只有声音没有画面，明明是mp4格式的文件呀？使用暴风影音试了一下，是有画面的呀！
辛辛苦苦又在网上搜了一番，花了整整586秒，终于找到了答案 。mp4视频需要h.264编码格式才会有图像的 。
找了一个 h.264 编码格式的 mp4 试了一下，不错，确实有图像了！看了半天，原来是一部老外的电影，叽里咕噜一阵，一句话也没听懂 。那O(∩_∩)O~，能否提供中文字幕呢，这样就不必费老大劲去听了！
HTML5中，通过在video元素添加track元素为视频添加字幕 。字幕文件有两种格式：WebVTT和TTML 。WebVTT是Web视频文本轨迹（Web Video Text Track），是UTF-8编码格式的文本文件；TTML是时序文本标记语言（Timed Text Markup Language），是XML格式的文件 。两种文件的具体格式，已经超出我们的讨论范围 。
video元素支持添加多个track元素，不同的track元素链接到不同的字幕文件 。用户可以在各个字幕间进行切换 。
<video poster = "img/beauty.jpg" controls preload>
<track src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"cn_track.vtt" kind="captions" srclang="zh" label="简体中文">
</video>
track元素中，src属性指定字幕文件的URL；srclang属性字幕文件的语言类型，若kind 属性值是 "subtitles" 时，该属性必需的；label 属性指定字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时，会显示标签的名称；kind指定字幕内容类型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default属性指定是否是默认字幕，如果一个都没指定，将不会自动显示字幕 。
除了字幕外，我还希望对视频进行过多的控制，比如让视频自动播放、循环播放、默认静音，以及视频窗口的尺寸等等，这些都能做到吗？
这已经不是什么事了，video 元素已经提供了相关属性，根据需要设置相应的属性就可以了 。这些属性及含义见表 23：

HTML中嵌入视频和音频代码

文章插图
HTML中嵌入视频和音频代码
哦，原来这么简单呀！那就到此为止吧，网页中嵌入视频的全部代码都在这里，就打包给你吧！
<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>
<source src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"media/vedio.mp4">
<source src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"media/vedio.ogg">
<track src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"cn_track.vtt" kind="captions" srclang="zh" label="简体中文">


推荐阅读


上一篇：过安全狗 记一次艰难的SQL注入

下一篇：金骏眉大红袍,金骏眉品鉴先容