HTML5视频与字幕使用的介绍
生活随笔
收集整理的這篇文章主要介紹了
HTML5视频与字幕使用的介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在 HTML5 問世之前，如果我們想要在網頁上面展示視頻音頻，經常會使用到的就是 Adobe Flash 這樣的插件，很多人可能和我一樣遇到過 Flash 插件崩潰的問題，讓人相當煩躁，而在 HTML5 中，提供了音頻和視頻的標準接口使這一局面得到了改觀，在這個實驗中，我們將為大家介紹如何在網頁中播放我們的視頻音頻文件。同時，我們也會學習 HTML5 對元素的拖放操作。
下面給大家一個在線的音頻視頻轉換網站：http://cn.office-converter.com/
HTML5視頻介紹
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
視頻格式和瀏覽器支持如下所示：
| .ogg | FireFox 3.5+ ，chrome 5.0+ ，Opera 10.5+ |
| .mp4/H.264 | Safari 3.0+ ，chrome 5.0+ ，IE 9.0+ |
| .webm | FireFox 4.0+ ，chrome 6.0+ ，Opera10.6+ |
例子：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body><video width="320" height="240" controls="controls"><sourcesrc="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"type="video/ogg"/><sourcesrc="http://labfile.oss.aliyuncs.com/courses/1248/video.mp4"type="video/mp4"/>你的瀏覽器不支持video元素</video></body> </html>注： 與 之間插入的內容是供不支持 video 元素的瀏覽器顯示的。video 元素允許多個 source 元素，source 元素可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。
單個文件引入也可以這樣寫：
<body><videosrc="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"width="320"height="240"controls="controls">你的瀏覽器不支持video元素</video> </body>video 標簽的屬性如下所示：
| autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | 出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| height | 設置視頻播放器的高度。 |
| loop | 出現該屬性，則當媒介文件完成播放后再次開始播放。 |
| muted | 規定視頻的音頻輸出應該被靜音 。 |
| URL | 規定視頻下載時顯示的圖像，或者在用戶點擊播放器按鈕前顯示的圖像。 |
| preload | 如果出現該屬性，則視頻在網頁加載時進行加載，并預備播放。如果使用“autoplay”，則忽略該屬性。 |
| url | 要播放視頻的URL。 |
| pixels | 設置視頻播放器的寬度。 |
字幕的簡單使用
使用常用的 WebVtt 字幕格式，在 中使用 元素引入字幕。例如：
track 元素的屬性說明：
| src | 指定資源 url。 |
| srclang | 資源的語言，例如：中文 zh，英文 en。 |
| kind | 默認值是 subtitles 字幕，captions 標題、音效及其他音頻信息，descriptions 視頻的文本描述，chapters 章節導航，metadata 元數據。 |
| lable | 選擇字幕時候出現的文字。 |
| default | default 指的是默認會顯示的字幕。例如兩個 元素，如果都沒有 default 屬性，那都不顯示，需要用戶手動調出。另外，default 只能出現在一個 元素上。 |
例子：
首先我們在終端中分別輸入以下命令，獲取所需字幕文件：
wget http://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt wget http://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt <body><videosrc="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"width="320"height="240"controls="controls">你的瀏覽器不支持video元素<tracksrc="video_ch.vtt"srclang="en"kind="subtitles"label="中文"default/><track src="video_en.vtt" srclang="en" kind="subtitles" label="English" /></video> </body>video_ch.vtt 中的內容為：
WEBVTT 00:00:01.000 --> 00:00:04.000 不準在課堂上打游戲 00:00:05.000 --> 00:00:09.000 好好學習，天天向上！video_en.vtt 中的內容為：
WEBVTT 00:00:01.000 --> 00:00:04.000 Don't play games in class！ 00:00:05.000 --> 00:00:09.000 Study hard and make progress every day！運行效果如下所示：
通過上面的案例，我們了解了簡單的視頻制作以及為視頻添加字幕和切換字幕。
總結
以上是生活随笔為你收集整理的HTML5视频与字幕使用的介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java 将数字金额转成中文大写
- 下一篇： 【HTML5期末大作业】制作一个简单HT