如何在网页上插入视频（用html制作）

首先下载video.js，百度一下就能找到。

这个是下载后的目录。

先把要用到的js\css.swf都加载到html页面上。如：

<link href="video-js/video-js.css" rel="stylesheet" type="text/css">

<script src="video-js/video.js"></script>

<script>

videojs.options.flash.swf = "video-js/video-js.swf"

</script>

加入下面的代码：

<video

id="my_video_1" class="video-js vjs-default-skin" controls  

 preload="auto"width="640"height="480"poster="video-js/my_video_poster.png"  

 data-setup="{}">

<source src="Wildlife.mp4" type='video/mp4'>

</video>

只要记住：修改width="640" height="480"来改变视频显示大小，修改src="Wildlife.mp4"来改变要显示的视频。

然后打开html文件查看效果吧，它有暂停、音量控制、全屏等功能，还有好多其他功能。

在html网页中添加视频过程如下：

1、如图，在项目文件中放置mp4格式的视频，因为H5只支持这类视频，avi格式的不可以。

2、然后在自己的HTML编辑软件建一个HTML5的文件，这里就用Hbuilder建立了。

3、然后添加video元素即可插入视频，最好用autoplay设置自动播放，controls设置控制栏。

4、source可以连接对应的视频文件资源，记得视频资源路径要写正确。

5、这样，等到HTML网页加载之后视频即可自动的播放。

6、并且左边有播放按钮，视频进度控制条等工具。

7、右边可以全屏播放，调节声音大小，如果是放在服务器上面还可以下载哟，非常方便。

最常用的向HTML中插入视频的方法有两种，一种是古老的<object></object>标签，一种是html5中的<video></video>标签。

前者的兼容性没得说，但是使用起来不太方便，后者使用起来很方便，但是兼容性让人头疼。

虽然后者兼容性存在很多问题，但是因为使用很方便，符合未来网页设计发展的趋势，因此我们以后者为主要的插入视频的方法，因为它兼容性的问题，前者作为辅助。

1、首先，通过TXT文档，创建一个网页的基本框架。也就是html、head、body。当然，用dw创建一个网页文档，会自动写入这些代码。这里，使用的是dw.

2、图片的格式通过有3种：1）GIF2）JPEG3）PNG GIF最大的好处是可以制作动态图片。

具体选择何种格式，看你自己。

其中，.html文件，是我已经创建并保存好的网页

test.jpg是即将要插入的图片。

3、其实，最好的目录架构，是单独创建一个文件夹，比如img等，将图片资源放入其中。

笔者之所以这样，是为了截图方便。

4、那么如何插入图片呢？非常简单，插入图片的标记值有一个：“img”标记！请在body中加入如下一行：

<img src="./test.jpg">由src指示图片的位置

双击该网页运行，便可看到网页中的图片了

如何来添加一段视频呢？其实，方法很简单，您只需要将以下代码拷贝到你想显示的页面位置或者后台新闻、普通栏目的编辑框的源代码中，就可以实现网上视频播放了。

代码：

<div style=" display:blockwidth:98%"><p style="text-align: left"><object id="myPlayer" height="375" width="440" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<param value="mms://video.wingsmedia.com.cn/wuan/othersites/123.wmv" name="URL" />

<param value="1" name="rate" />

<param value="0" name="balance" />

<param value="" name="defaultFrame" />

<param value="1" name="playCount" />

<param value="0" name="autoStart" />

<param value="0" name="currentMarker" />

<param value="-1" name="invokeURLs" />

<param value="" name="baseURL" />

<param value="50" name="volume" />

<param value="0" name="mute" />

<param value="1" name="stretchToFit" />

<param value="0" name="windowlessVideo" />

<param value="-1" name="enabled" />

<param value="-1" name="enableContextMenu" />

<param value="0" name="fullScreen" />

<param value="" name="SAMIStyle" />

<param value="" name="SAMILang" />

<param value="" name="SAMIFilename" />

<param value="" name="captioningID" /></object></p></div>

</div>

针对以上代码，您只需要修改几个参数就可以成功了。

height="375" width="440"

这个参数是设置视频的大小，前面是高度，后面是宽度。它们都是以像素为单位。用户可以根据实际需要设置其大小。

value="mms://video.wingsmedia.com.cn/wuan/othersites/123.wmv" name="URL"

这个是最主要的内容，就是添加视频的链接。视频的来源一般有两种，一个是自己传到网上的，还有一种是从别人网上拷贝来的链接。比如土豆等一些视频网站。用户只要有视频的链接地址，替换掉代码中有下划线的链接地址就可以播放了。

但需要注意的是，视频的格式一定是wmv格式。

<param value="0" name="autoStart" />

这段代码是设置视频是否自动播放。“0”为默认不播放；“1”为页面打开后自动播放视频。

---