整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
使用Word時，有時需要插入視頻文件，但某些視頻實在太大，這時你可以選擇插入網絡上的視頻哦~ 今天我就教大家如何操作，不會的快來學一下吧！
需要注意的是，老版本的Word不支持插入在線視頻，我這里用的是Word2013 。
1、打開在線視頻的網址，點“分享”按鈕，選擇html代碼 或 通用代碼，進行復制；
2、復制好后，在文檔里單擊【插入】-【視頻】，粘貼剛剛復制的代碼即可。
OK！這樣在線視頻就插入成功啦~ 記得演示時要保證網絡暢通，避免播放卡頓哦！
篇介紹了前端入門——html 中如何使用圖片,今天講下如何使用視頻和音頻等多媒體元素，它們能讓你的網頁更加豐富，讀者相對于文字圖片更愿意觀看視頻和音頻或其它多媒體。在本教程中，您將了解到不同的多媒體格式，以及如何在您的網頁中使用它們。
是多種媒體的綜合，一般包括文本，聲音和圖像等多種媒體形式。在計算機系統中，多媒體指組合兩種或兩種以上媒體的一種人機交互式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音、動畫和影片，以及程式所提供的互動功能。
在因特網上，您會經常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。
多媒體元素（比如視頻和音頻）存儲于媒體文件中。多媒體元素也擁有帶有不同擴展名字的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。具體有哪些格式可以參考 w3cshool 網站的介紹，https://www.w3cschool.cn/html5/html5-video.html ，https://www.w3cschool.cn/html5/html5-audio.html。
直到現在，網頁上仍然不存在一項顯示視頻的標準。今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
語法如下：
<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 屬性控制視頻的尺寸。如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道視頻的大小，瀏覽器就不能在加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
<video> 與 </video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。一個頁面可以使用多個<video> 標簽，<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。
顯示效果：
和視頻一樣沒有統一的標準，各個瀏覽器都不一樣。HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素。通過使用HTML5中的audio功能，你可以實現與flash相同的功能，即回放、跳轉、緩沖等。
語法如下：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>control 屬性供添加播放、暫停和音量控件。在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。允許使用多個 <source> 元素。<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。
顯示效果：
插件（Plug-in）是擴展瀏覽器標準功能的計算機程序，插件被設計用于許多不同的目的：
1、<object> 元素
<object> 元素定義 HTML 文檔中的嵌入式對象。
它旨在將插件（例如 Java applet、PDF 閱讀器和 Flash 播放器）嵌入網頁中，但也可以用于將 HTML 包含在 HTML 中。
如下：
插入一個網頁片段
<object width="100%" height="500px" data="snippet.html"></object>或者插入一個圖片
<object data="audi.jpeg"></object>播放一個視頻
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>播放一個音頻
<object height="100" width="100" data="song.mp3"></object>2、<embed> 元素
<embed> 元素也可定義了 HTML 文檔中的嵌入式對象。這是一個 HTML5 標簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效。
插入一個flash文件
<embed width="400" height="50" src="bookmark.swf">插入html片段
<embed width="100%" height="500px" src="snippet.html">播放一個音頻
<embed height="100" width="100" src="song.mp3" />插入一個圖片
<embed src="audi.jpeg">注意：
大多數瀏覽器不再支持 Java 小程序和插件。
大多數現代瀏覽器關閉了對 Flash 的支持。
我們可以使用 <video> 和 <audio> 標簽來顯示視頻和音頻
如下視頻代碼，HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。
HTML 5 + <object> + <embed> 是最好的解決辦法。
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>如下音頻代碼，HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。
HTML 5 + <embed> 是最好的解決辦法。
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>到此你以及了解了如何在網頁中使用視頻音頻及其它多媒體控件，趕快自己試試，祝你學習愉快。
參考文獻：https://www.w3school.com.cn/html/html_video.asp
上篇：前端入門——html 中如何使用圖片
下篇：前端入門——html 表格的使用
要說明：本文所有內容由廣州美迪電商學院、京東商學院、中國電子商務協會認證講師狀元郎原創經驗分享，任何個人或平臺不得將本文中所提到的經驗流程、方法、技能作為收費商業用途，一經發現追究相應責任，轉發請注明出處，謝謝。
小編做京東運營多年，見證京東平臺的逐步完善變化，其實京東平臺在最近的這一兩年變化真的很大，你無法想象在2012年之前的京東商家后臺用戶體驗度有多差，打開后臺時不時的白屏，要么就是崩潰。總之三個字：反應慢。
現在的京東商家后臺無論是從菜單的布局、視覺效應、用戶體驗、使用習慣等方面越來越靠近淘寶天貓的后臺了。其實這是好事，就是一個商家如果熟悉了天貓后臺再來操作京東，那么這個學習成本就少了很多，不需要花費太多的時間來適應，用起來也能快速上手。
2015年以后京東移動端的流量已經逐漸偏向于主流了，現在京東移動端有4大入口：京東APP端、微信端、手Q端、，很多精明的京東運營在做付費推廣時已經不太重視PC端流量了，移動端流量、轉化就顯得尤為重要。
現在迎來一個新的問題是移動端是否能夠和PC端一樣插入視頻？
很多商家問過，如果你能看到這篇文章，其實你已經得到了肯定的答案，我們先來看看3個例子：
商品一：
商品二：
商品三：
以上三個商品都有一個共同的特點，就是它們的APP端詳情頁都插入的視頻文件。大家都知道，目前京東的商家后臺APP端是不支持視頻直接插入的，所以我們能見到這樣的詳情頁插入視頻的商品著實不多。
這個逆天的做法能把那些京東運營小白甩得遠遠的，買同樣的商品轉化卻比你高，這個也是原因之一。都說獨食不肥，那么這些逆天的視頻展現方式，是怎么做到的，今天狀元郎為你揭開其中的奧秘。
流程如下：
第一步：上傳視頻到京東視頻庫，并且是審核通過狀態。
路勁：商家后臺-我的店鋪-視頻管理（視頻功能是長期免費使用的，如果沒有就點擊購買即可）
第二步：在PC端把視頻使用到對應的商品SPU，點擊視頻列表操作中的“使用”如下圖：
第三步：在PC端商品頁面播放視頻，這時視頻的右側會彈出一個“分享”點擊一下，找到這個視頻源的鏈接。
第四步：在APP端新建一個活動頁面，這里注意活動時間一定要設置長一些，最好是設置為一年，這樣就避免活動到期的視頻下架看不到。
第五步：APP活動頁中模塊類型選擇創意代碼類的“自定義內容區”
第六步：模塊中插入視頻代碼（這一步是所有流程中的最關鍵的一步，非常重要）
為了讓大家清楚代碼結構，視頻中的源代碼如下：
<iframe id="le-video" frameborder="0" scrolling="no" style="display:block; width:750px; height:422px; margin:0 auto;" src="http://s.yuntv.letv.com/bcloud.html?uu=82abd5491f&vu=56bd560c78&width=750&pu=098df6fe6d&height=422">
</iframe>
現在我們對這段代碼進行解剖，這段代碼里面用到了，iframe元素也就是文檔中的文檔，或者浮動的框架(frame)；
通俗一點說就是在網頁中嵌套另一網頁(IFRAME標簽)，之所以能在APP端顯示框架中的視頻， 就是這個iframe框架機構起的作用。
分段解讀如下：（注意：括號中為小編標注是為了讓大家更好理解代碼內容結構）
<iframe id="le-video" （框架的ID，這個是樂視視頻的意思，京東視頻播放調用的是樂視視頻插件）
frameborder="0" （框架邊框=0，就是視頻滿屏播放）
scrolling="no" （邊框滾動=no，就是視頻靜止在固定寬度和高度內播放）
style="display:block; （式樣=顯示模塊，就是APP端框架中顯示視頻的意思）
width:750px; （寬度=視頻的寬度750）
height:422px; （高度=視頻的高度422）
margin:0 auto;" （余量=0）
src="http://s.yuntv.letv.com/bcloud.html?uu=82abd5491f&vu=56bd560c78&width=750&pu=098df6fe6d&height=422">
</iframe>
（這一段是視頻的源鏈接，注意在源鏈接中的【src="http://yuntv.letv.com】這個地方是多了【s.】的）視頻源鏈接中有高度和寬度的參數。分別是：750和422。
第七步：做好了活動頁后就預覽一下效果，左側應該能看到視頻預播放畫面，用手機掃描右側的二維碼能看到下圖手機中的視頻框架畫面。
如果上面的兩個預覽視頻圖都正常顯示，那么到這一步為止，所有的設置都是正確的了。
第八步：把視頻插入到APP端商品詳情頁中去，這里有2種方法。（A方法是直接通過手機端關聯板式插入視頻；B方法是直接在商品詳情頁中插入視頻，
其中A方法不會改變商品既有是搜索權重，而且能快速同步到多個商品，撤銷、修改版式也比較靈活；B方法會對商品搜索有影響，所有建議使用A方法，下面我們分開來講2個不同的設置方法。）
A方法是直接通過手機端關聯板式插入視頻
第1步：新建一個關聯板式，把視頻預播放畫面640PX寬度的截圖插入到手機版頭部內容區域。
然后對這張圖片做鏈接，這個鏈接就是我們前面做的APP活動頁地址鏈接，如下
第2步：在在售商品列表中勾選需要做關聯板式的SPU設置對應的關聯板式即可實現APP端這個商品中有視頻文件。
B方法是直接在商品詳情頁中插入視頻
B方法就是直接在手機詳情頁頭部中插入一張圖片，然后這張圖片指向APP端的活動頁即可實現最終的目的。
再一次回顧很多商家一直期盼的APP端插入視頻愿望，就知道代碼功能其實很強大，無所不能，只有想不到的，沒有做不到的，懂代碼能突破很多平臺的局限性。
好了，說了這么多，估計有人看的也是云里霧里的了，現在總結一下思路，讓大家更好理解以上的步驟。其實關鍵的步驟只需要3步走即可。
一、上傳視頻，找到視頻源鏈接地址。
二、創建一個APP端活動頁，活動頁內插入視頻。
三、通過關聯板式或者手機端詳情頁插入圖片，圖片指向APP端活動頁地址鏈接。
小編這樣一說是不是感覺很簡單了，呵呵，不妨試一下這個方法趕緊上傳視頻吧，讓你家爆款詳情頁做到更好吧。
下一次分享干貨，更精彩！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
