使用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="//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="//s.yuntv.letv.com/bcloud.html?uu=82abd5491f&vu=56bd560c78&width=750&pu=098df6fe6d&height=422">
</iframe>
(这一段是视频的源链接,注意在源链接中的【src="//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小时内与您取得联系。