整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
網頁中添加視頻、聲音、動畫等，可以增強用戶體驗。在HTML5之前，為網頁添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。
HTML5中，提供了對多媒體的原生支持，只需通過 video 元素，就可以向網頁嵌入視頻、電影或音頻資源，通過 audio 元素向網頁嵌入音頻資源，省時省力。
HTML中嵌入視頻和音頻代碼
在HTML5時代，在網頁中嵌入視頻非常簡單，只需要一個 video 元素，并設置它的 src 屬性，使其鏈接一個視頻地址就可以完全搞定了，這個太esay了
<video src="media/vedio.mp4"></video>
把這個網站在IE8中打開一看，網站上除了一片空白外，什么也沒有，這是為什么呢？
原來 video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無法識別 video 標簽。如果瀏覽器不識別 video標簽，則會忽略它，當做什么都沒有。這就是網站上一片空白的原因。
這個問題好解決，只需在 video 標簽之間放置文本信息，不支持 video 標簽的老瀏覽器，會顯示 video 標簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡單！
<video src="media/vedio.mp4">
你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！
</video>
在IE8上打開一看，確實顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。
下載了Opera瀏覽器的最新版本25.0，打開一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標簽的，那又是為什么呢？
這個就得從視頻的編碼格式說起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。
Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。
這個Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標簽，故video標簽之間的文本信息沒有顯示出來，但它不支持ogg，所以就不進行播放，最終導致頁面出現一片空白。這下可怎么辦呢？
其實辦法有的是，我們可以從網上下載一副圖像，放到視頻播放窗口，如果視頻無法播放，就顯示這張圖片，是不是更好呢？從網上下載一張美女圖片，干脆叫beauty.jpg吧。那這個圖像怎么添加到視頻窗口呢？
video標簽有個poster 屬性，就是專門在視頻窗口放置圖片的。poster是一個video的占位符，無論什么情況下，只要視頻還沒有播放（視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點擊播放按鈕前），就會顯示該圖像，可以看做是視頻播放之前插入的宣傳畫或海報。
<video src="media/vedio.mp4" poster = "img/beauty.jpg">
你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！
</video>
在Opera瀏覽器上刷新一下，真的有一個美女沖著自己微笑呢。雖然視頻沒有播放出來，這回心情卻是好多了。
那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒問題了。
我想了想，這個辦法不好，萬一某個瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點子，隨便在網上一搜，辦法就有了。
在 video 元素中添加 source 元素，就可以解決這個問題。在source 元素中，通過 src 屬性指定視頻的地址，通過 type 屬性指定視頻的類型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個source 元素，讓不同的 source 元素鏈接到不同的視頻文件。
這樣的話，當瀏覽器發現 video 元素時，首先會查看它本身是否定義了 src 屬性。如果沒有，就會檢查 source 元素。瀏覽器會逐個查看這些視頻源，直到找到一個可以播放的視頻。一旦找到，就會播放它并忽略其他的視頻源。我們干脆添加兩個source，一個是mp4，一個是ogg，這下視頻是一定能播放出來了。
<video poster = "img/beauty.jpg">
<source src="media/vedio.mp4" type="video/mp4">
<source src="media/vedio.ogg" type="video/ogg">
你的瀏覽器已經老掉牙了，不支持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="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="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中嵌入視頻和音頻代碼
哦，原來這么簡單呀！那就到此為止吧，網頁中嵌入視頻的全部代碼都在這里，就打包給你吧！
<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>
<source src="media/vedio.mp4">
<source src="media/vedio.ogg">
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">
你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！
</video>
睜大眼睛一看，卻只有7行代碼。然而，就這區區7行代碼，可把他折磨得夠嗆。
看著這一切都全部搞定，他仰望著天空，長長呼了一口氣，顯得是那么的放松，那么的愜意。此時，他閉上眼睛，在自己的夢幻世界里遨游！
有了在網頁中嵌入視頻的經歷，要在網頁中嵌入音頻，那簡直就是小菜一碟了。只要把vedio元素換成 audio 元素，就全部搞定。
但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒有畫面，也就沒有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。
網頁中嵌入音頻的代碼如下：
<audio controls preload autoplay loop muted>
<source src="media/audio.mp3">
<source src="media/audio.wav">
<source src="media/audio.ogg">
你的瀏覽器已經老掉牙了，不支持audio，還不趕快使用現代瀏覽器O(∩_∩)O~！
</audio>
你們知道嗎，在Word文檔中不只能插入文本和圖片，如果想讓你的Word文檔變得更加的豐富，我們可以插入一些Flash動畫，網絡視頻等，那么接下來跟小繪一起來看看怎么在word文檔中插入動畫和視頻吧~
第一步我們先打開word，然后點擊「插入」，選擇「文本」，再選擇「對象」，點擊「由文件創建」，選擇「瀏覽」選中Flash動畫的路徑位置，然后插入。
我們需要復制一下文件路徑，然后點擊「確定」后返回文檔，鼠標點擊「右鍵」選擇插入的對象，再點擊「屬性」，在「Movie」后面的空白處粘貼一下剛剛復制的路徑。接下來關閉「屬性」，再進入「開發工具」，點擊「控件后」取消「設計模式」。
二、Word中插入網絡視頻
如果我們想在word里插入愛奇藝或者優酷等一些網絡視頻，我們可以先在網站視頻上點擊「分享」按鈕，然后「復制Html」代碼。回到Word文檔中，點擊「插入」，然后選擇「媒體」再點擊「聯機視頻」，在「來自視頻嵌入代碼」后面空白處，將代碼粘貼進去，然后點擊后面的「插入」按鈕。
怎么樣，你學會了嗎？
更多打印知識、職場小技巧記得
多跟小繪在留言區溝通哦~
老板給我1天時間做的Excel產品報價表格，我只用了2分鐘
續分享wordpress建站教程。做wordpress外貿建站的用戶都喜歡在網站中插入youtube視頻，所以今天就分享如何給網站插入YouTube視頻。
wordpress中其實默認都是可以插入YouTube視頻，但是大家在使用時可能還是會遇到一些問題，有可能插入不成功，所以接下來悅然wordpress建站給大家分享幾種方法。
作者：悅然WordPress建站
首先，我們需要打開YouTube視頻，然后點【SHARE】，它會提示多種分享方式，插入網站中我們主要會用到短鏈接或Embed代碼這兩種方式。
在wordpress古騰堡編輯器中已經包含了YouTube區塊，所以我們可以直接添加一個YouTube區塊，然后填寫YouTube視頻分享的短鏈接（視頻頁面的完整鏈接也可以），點【嵌入】即可。
這個方法很簡單的，但是該方法可能會受到主題、插件、網絡、服務器等影響，導致嵌入不成功。
如果方法1不能用，那么也不用糾結，我們可以使用HTML代碼插入YouTube視頻。復制前面準備工作中提到的Embed代碼。
如果你使用的是古騰堡編輯器，可以添加一個HTML區塊，把Embed代碼粘貼進去。
然后我們點預覽就可以看到嵌入的YouTube視頻了。不過這里要注意的是你的網絡需要能連接到YouTube才行。
HMTL插入YouTube視頻的方法基本是通用的，所以在經典編輯器中，這個方法也適用。
如果你使用woocommerce插件制作網站，在添加產品時想加上YouTube區塊該怎么辦呢？woocommerce的產品編輯頁面默認是經典編輯器樣式的，所以不能直接添加HTML區塊。
此時我們可以在編輯器頁面點【文本】，這里可以直接插入HTML代碼，我們把前面復制的Embed代碼粘貼進去，如上圖所示。粘貼完成后我們再點【可視化】
如上圖，這樣YouTube視頻就嵌入成功了。
還有一些編輯器可能沒有【文本】那個選項，比如在一些多供應商系統的編輯器中，此時我們就沒辦法直接插入HTML代碼了。但是這些編輯器實際上是支持HMTL的，所以我們可以從其它地方把視頻復制進來。
比如我們可以在有HTML功能的編輯器中先添加好YouTube視頻，如上圖，悅然wordpress建站先在古騰堡區塊編輯器中添加好視頻（使用HTML或短鏈接方式插入都行），添加成功后，我們選中整個視頻，按CTRL+C，然后在不支持HTML的編輯器按CTRL+V粘貼，此時你會發現整個視頻都粘貼進來了。
可以實現嵌入YouTube視頻的wordpress插件有很多，比如Embed Plus for YouTube、EmbedPress等等。插件的使用就不講了，安裝就可以使用。
以上就是今天分享的wordpress建站教程，分享了幾種插入YouTube視頻的方法，希望對您有所幫助。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
