整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
多站點都會使用到視頻. HTML5 提供了展示視頻的標準。
檢測您的瀏覽器是否支持 HTML5 視頻：
檢測
Web站點上的視頻
直到現(xiàn)在，仍然不存在一項旨在網(wǎng)頁上顯示視頻的標準。
今天，大多數(shù)視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了一種通過 video 元素來包含視頻的標準方法。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
HTML5 (視頻)- 如何工作
如需在 HTML5 中顯示視頻，您所有需要的是：
實例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>
<video> 元素提供了 播放、暫停和音量控件來控制視頻。
同時<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設(shè)置的高度和寬度，所需的視頻空間會在頁面加載時保留。。如果沒有設(shè)置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據(jù)原始視頻的大小而改變。
<video> 與</video> 標簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。
<video> 元素支持多個 <source> 元素. <source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
視頻格式與瀏覽器的支持
當前， <video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg:
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (從 Opera 25 起) | YES | YES |
MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
視頻格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - 使用 DOM 進行控制
HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。
<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.
其中的方法有用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設(shè)置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。
例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取并設(shè)置屬性，以及如何調(diào)用方法。
實例 1
為視頻創(chuàng)建簡單的播放/暫停以及調(diào)整尺寸控件：
播放/暫停 放大 縮小 普通
上面的例子調(diào)用了兩個方法：play() 和 pause()。它同時使用了兩個屬性：paused 和 width。
HTML5 Video 標簽
| 標簽 | 描述 |
|---|---|
| <video> | 定義一個視頻 |
| <source> | 定義多種媒體資源,比如 <video> 和<audio> |
| <track> | 定義在媒體播放器文本軌跡 |
給大家推薦一下學習研究HTML5必備的一些個網(wǎng)站，更加有利于大家對html5的學些和研究。
1. W3C HTML 5 權(quán)威教程，學習HTML5的各種標簽，查詢參考手冊。
2. HTMLDemos可以插件HTML5標簽在各瀏覽器的兼容性，同時你還可以查看各種HTML5的標準Demo演示。
3. 蘋果提供的HTML5演示站點，提供很多很絢麗的HTML5Demo。鏈接
4. 測試瀏覽器對HTML5的支持，并打分，可以知道你當前的瀏覽器對HTML5的支持情況如何，各種標簽和組件的支持情況。鏈接
5.360的HTML5基地。鏈接
6. WHATWG博客是網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作小組（Web Hypertext Application Technology Working Group）的博客。鏈接
7. HTML5醫(yī)生發(fā)表了許多文章，都是關(guān)于HTML5及其語義、及如何正確使用它的。他們也通過“詢問醫(yī)生”收集了很多問題，并在文章中予以回答，所有人都可從中受益。鏈接
8. 這是一個以表格制成的備忘單形式的單頁面，描述了HTML5、CSS3、SVG及其他未來網(wǎng)絡(luò)技術(shù)的特征。鏈接
9. 這個備忘單就是一個簡單的可視網(wǎng)格，包含了所有HTML5標簽和相關(guān)的屬性。鏈接
10 .一個提供HTML5各種功能演示的網(wǎng)站，提供各種HTML5的顯示Demo。鏈接
11. 這個網(wǎng)站提供了大量的HTML5游戲資源，喜歡HTML5游戲的童鞋們，可以千萬別錯過哦。鏈接
12. 一個HTML 5的文檔資料網(wǎng)站，做得很出色。介紹的圖片全是用了涂鴉的方式，很直觀，很可愛的網(wǎng)站。鏈接
13.h5之家（中文學習園地）。鏈接
今天就給大家推薦到這里，這15個網(wǎng)站，基本上可以算得上是HTML5學習研究的上上至寶了。如果你也有更好的HTML5網(wǎng)站推薦，歡迎評論并留下網(wǎng)址信息，方便整理。
出于對PMCAFF用戶的尊重，任何在PMCAFF產(chǎn)品經(jīng)理社區(qū)發(fā)布的內(nèi)容，在未經(jīng)允許的情況下，不得在任何平臺被直接或間接發(fā)布使用或被用于其他任何商業(yè)目的。如有違反上述聲明者本網(wǎng)站將追究其相關(guān)法律責任。
微信公眾號：pmcaffcom
投稿郵箱：tougao@pmcaff.com
Greated by PMCAFF產(chǎn)品經(jīng)理社區(qū) - www.pmcaff.com
indManager 2018增加了新功能，HTML5互動視圖導出，可在瀏覽器中瀏覽思維導圖，消除內(nèi)容與受眾之間的障礙。下面是2018最新版本和2016版本的導出功能菜單面的對比。
相比2016，2018的菜單做了一個整合，界面顯示的更加簡潔了，我們可以看到，多了一個HTML5交互式導圖。
如圖，我們打開一幅思維導圖，導出HTML5交互式導圖，MindManager 即將打開一個HTML 5 的網(wǎng)頁進行查看。
除此之外，收件人可以訪問和控制演示設(shè)置，可以更輕松共享和傳播視圖。MindManager 更新內(nèi)容不限于上述所列，如有需要可到MindManager 產(chǎn)品的新版特性(www.mindmanager.cc)中查看更新內(nèi)容對比。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
