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