HTML5 视频嵌入 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 10时,
这是HTML5嵌入视频的简单方法
代码片段(1)
1.&[代码][HTML]代码&&&&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&title&HTML5 Video Demo&/title&
&div style="width: 667 margin: 0"&
&video width="667" height="375" controls&
&source src="FILE_NAME.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&
&source src="FILE_NAME.ogv"
type="video/ogg" /&
&object width="667" height="375" type="application/x-shockwave-flash" data="FILE_NAME.swf"&
&param name="movie" value="FILE_NAME.swf" /&
&param name="flashvars" value="controlbar=over&image=PLACEHOLDER_FILE_NAME.jpg&file=FILE_NAME.mp4" /&
&img src="PLACEHOLDER_FILE_NAME.jpg" width="250" height="152" alt="ALT_HERE" title="TITLE_HERE" /&
开源中国-程序员在线工具：
相关的代码(66)
49回/18487阅
0回/13971阅
[JavaScript]
7回/11101阅
4回/9465阅
[JavaScript]
22回/7715阅
[JavaScript]
1回/7650阅
[JavaScript]
9回/7535阅
43回/6651阅
[JavaScript]
0回/6105阅
[Flash/ActionScript/Flex]
0回/5524阅
[Shell/批处理]
开源从代码分享开始
小编辑的其它代码您可能喜欢的/Xihuan记住登录一个月发表随想还能输入：200字该用户最新代码编程随想&by by by by by by [html]代码库HTML嵌入代码：
&video src="video/video.mp4" width="700" height="400" controls autoplay&//优先使用Video播放
&object classid="clsid:D27CDB6E-AE6D-11cf-96B8-" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="700" height="400"&
&param name="movie" value="Flvplayer.swf" /&//播放器地址
&param name="quality" value="high" /&
&param name="allowFullScreen" value="true" /&
&param name="FlashVars" value="vcastr_file=video/video.mp4&LogoText=test" /&//IE浏览器
&embed src="Flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=video/video.mp4&LogoText=test" quality="high" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" width="700"
height="400"&&/embed&//高级浏览器
Flvplayer.swf 参数详细说明：
vcastr_file 方法2传递影片flv文件地址参数，多个使用|分开 空
vcastr_title 影片标题参数，多个使用|分开，与方法2配合使用 空
vcastr_xml 方法3 传递影片flv文件地址参数，样板参考 vcastr.xml
IsAutoPlay 影片自动播放参数：0表示不自动播放，1表示自动播放 0
IsContinue 影片连续播放参数：0表示不连续播放，1表示连续循环播 1
IsRandom 影片随机播放参数：0表示不随机播放，1表示随机播放 0
DefaultVolume 默认音量参数 ：0-100 的数值，设置影片开始默认音量大小 100
BarPosition 控制栏位置参数 ：0表示在影片上浮动显示，1表示在影片下方显示 0
IsShowBar 控制栏显示参数 ：0表示不显示；1表示一直显示；2表示鼠标悬停时显示；3表示开始不显示，鼠标悬停后显示 2
BarColor 播放控制栏颜色，颜色都以0x开始16进制数字表示 0x000033
BarTransparent 播放控制栏透明度 60
GlowColor 按键图标颜色，颜色都以0x开始16进制数字表示 0x66ff00
IconColor 鼠标悬停时光晕颜色，颜色都以0x开始16进制数字表示 0xFFFFFF
TextColor 播放器文字颜色，颜色都以0x开始16进制数字表示 0xFFFFFF
LogoText 可以添加自己网站名称等信息(英文) 空
LogoUrl 可以从外部读取logo图片，注意自己调整logo大小，支持图片格式和swf格式 空
EndSwf 影片播放结束后,从外部读取swf文件，可以添加相关影片信息，影片分享等信息，需自己制作 空
BeginSwf 影片开始播放之前,从外部读取swf文件，可以添加广告，或者网站信息，需自己制作 空
IsShowTime 是否显示时间 : 0表示不显示时间，1表示显示时间 1
BufferTime 影片缓冲时间，单位（秒） 2[代码运行效果截图][源代码打包下载](50积分)[99 次下载]分享到：更多回复评论共7 条评论
发表评论：评论须知：1、评论每次加2分，每天上限为30；2、请文明用语，共同创建干净的技术交流环境；3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。经验7630 米
在线时间64 小时
版本JHECNBA12.0
机型小米手机1/1S
签到次数42
MIUI版本JHECNBA12.0
组建家用html5播放网页平台本教程为简单配置教程，由于本人只管接触新技术，不作深入，所以有很多遗憾跟不完美的地方，希望有能力的能帮忙完善一下，并分享给大家。支持下分享精神。首先需要大家需要注意几点情况：1.电脑系统需要为win7 （注：home版系统可能无法使用，请大家使用pro版以上，最好是旗舰版系统）2.是否能够播放跟手机或者平板播放器有关，如果默认浏览器无法播放请更换浏览器。也希望大家有能力做测试的能将支持播放的浏览器告知给大家。3.另外，需要大家特别注意的是，我们电影的源文件为mp4，选择mp4的原因是，能播放这个格式的设备很多（包括ios，android，psv，ps3，以及部分非智能手机等等），所以片源比较好找（推荐个下mp4格式电影的好地方，电玩巴士论坛的影视区，都是可以使用的mp4格式的片源，更新也比较快，是本人自己使用的下载点），同时也是html5支持的3种格式之一（由于另外两种格式基本上难找）。
下面正式开始操作步骤：首先需要大家在电脑上安装iis。如果对这部分熟悉的，相信大家能很快安装并配置好iis。不熟的也没关系，下面我会详细给大家讲解安装的步骤。首先请大家进入到控制面板中（被跟我说控制面板都找不到吧。。好吧。。请大家点击开始，选择控制面板。）
然后请大家点击程序。
接着，选择打开或关闭windows功能。
在如图所示的万维网服务打勾。然后点击确定，系统会自动为你进行安装。好了，到了这里，大家的iis就装好了。接着将进入到配置环节。重新进入控制面板
选择系统和安全
然后选择管理工具
打开Internet信息服务（iis）管理器
现在会到这样的一个界面，这个界面看着比较复杂，请大家注意看清楚需要修改的地方。首先请点击左边列表，选择default web site，然后在最右边的列表选择基本设置，如下图所示。
请大家注意一下这里，我们需要修改的是物理路径这里，我们要设置成自己盘上的某个文件夹，这个文件夹没什么要求，比如我选用的是e盘下面，psv文件夹下的video文件夹。至于为什么选用这个文件夹是因为，我的电影都放在这个文件夹下面。建议大家最好能专门设个文件夹用来存放我们的html5网站和电影。
当选择好文件夹后我们点击确定。其实这个时候我们的网站大致设置好了。
接着要设置一个参数来让我们的网站支持html5的mp4播放。请大家在internet信息服务（iis）管理器中打开MIME类型
选择添加，然后输入如图参数
点击确认。
到这里为止，我们的网站设置全部结束。下面我们要进入的网页编辑部分。这部分需要的工具。。大家应该不会陌生，那就是我们伟大的记事本。首先请大家进入我们之前设置的，网站的文件夹。比如我的就是e盘下面psv文件夹下的video文件夹。
然后请大家新建一个名为index.html文件。并且用记事本打开。如果懒得建，我会在后面放出下载。请在记事本中加入以下代码。&!DOCTYPE html PUBLIC &-//W3C//DTDXHTML 1.0 Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&head&&metahttp-equiv=&Content-Type& content=&text/charset=utf-8& /&&title&变形金刚&/title&&/head&&body&&p&&br&&video width=&800& height=&450&controls=&controls&&&source src=&./变形金刚1.mp4& type=&video/mp4&&Your browser does not support the video tag.&/video&&/p&下面我来解释一下上面的代码。我们需要关注的只是变形金刚 这几个字出现的地方。第一个变形金刚在&title&。。。&/title&中，这个是网页标题，不用管他，随便填什么都行。关键在于第二个。&source src=&./变形金刚1.mp4&type=&video/mp4&&这里的变形金刚1.mp4就是你放在文件夹中的电影的文件名。因为只支持mp4格式文件，所以大家将电影文件拷到这个文件夹后，只要修改变形金刚1，这几个字为你电影文件的文件名就可以了。这里要注意的是必需是mp4格式文件，其他格式不支持。还有请保证文件名的一致性，如果搞错了，我们待会就没办法播放了。
好了修改好文件后请保存一下，关掉就好了。
接下去，由于win7的安全性，我们可能要去设置下防火墙。进入控制面板，网络和internet，网络和共享中心，在左边最下面找到windows防火墙，然后选择允许程序或功能通过windows防火墙，找到万维网服务（http）打勾（如图）。
确定，退出。我们所有设置就完成了，接着大家就可以在手机或者平板上打开浏览器，访问电脑IP就能进入我们建立的网站了今天的html5教程就到这里结束了。如有疑问和搞不定的地方，大家可以跟帖。下次为大家介绍如何用格式工厂转换电影格式为mp4.下面是我做了一部分美化后的源文件，请大家放到网站根目录下面。然后修改index.html文件内的相关内容就可以了。
(196.07 KB, 下载次数: 88)
20:01 上传
点击文件名下载附件
下载积分: 经验 -1 米
本文转自机锋
分享到微信朋友圈
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
经验587 米
在线时间34 小时
积分 764, 距离下一级还需 1236 积分
积分 764, 距离下一级还需 1236 积分
机型Google Nexus 7
太强大了把
html5的好处非常多 首先温度比在线flash要低10度左右的
经验587 米
在线时间34 小时
积分 764, 距离下一级还需 1236 积分
积分 764, 距离下一级还需 1236 积分
机型Google Nexus 7
居然抢到了沙发 荣幸！！
经验431 米
在线时间23 小时
版本5.3.27
积分 496, 距离下一级还需 4 积分
积分 496, 距离下一级还需 4 积分
机型未知设备
签到次数31
MIUI版本5.3.27
赶脚好高端的说
经验2838 米
在线时间537 小时
版本6.6.30
积分 3293, 距离下一级还需 1707 积分
积分 3293, 距离下一级还需 1707 积分
机型小米手机5
签到次数114
MIUI版本6.6.30
LZ很用心，支持了。
在线时间1 小时
积分 3, 距离下一级还需 47 积分
积分 3, 距离下一级还需 47 积分
机型HTC HD2
受益呀，谢谢了
经验115 米
在线时间36 小时
积分 142, 距离下一级还需 58 积分
积分 142, 距离下一级还需 58 积分
机型MOTO Milestone
我怎么看不见图了，还有就只能支持MP4么，好可惜哦
1000万用户纪念勋章
MIUI1000万用户纪念勋章
关注新浪微博
已关注新浪微博
MIUI 100周
100周发布纪念勋章
Copyright (C) 2016 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号html中怎么插入视频？
&b&一、视频文件格式可能是flash或者MP4的。&/b&&br&我使用&embed&标签MP4格式的在IE和非IE浏览器下显示完全程度不一致，只有IE有视频组件（暂停，播放，声音大小调节按钮）。火狐下很卡。用网上的&object&自动识别浏览器方法也不行。&br&&b&二、不需要自动播放，但是需要未点击播放的时候显示预览图，而不是漆黑一片。&/b&&br&视频不播放的时候显示预览图是不是要flash提前做好，如果不是，那要怎么编写代码？如果 autoplay:
false, 会显示&img src=&/7c1fb388a321b28e40ba_b.jpg& data-rawwidth=&482& data-rawheight=&465& class=&origin_image zh-lightbox-thumb& width=&482& data-original=&/7c1fb388a321b28e40ba_r.jpg&&很丑有木有！怎么才能像优酷一样，没播放之前是一个预览图，小清新这样的？&br&&img src=&/bd9ec679aa5b9_b.jpg& data-rawwidth=&456& data-rawheight=&276& class=&origin_image zh-lightbox-thumb& width=&456& data-original=&/bd9ec679aa5b9_r.jpg&&&br&我拿火狐看优酷的视频格式也是swf的不需要装插件，为什么我自己做的网页还被提示要装插件才能使用？而且是N个插件。&br&&img src=&/3cc3ba26afdc68c9a768bc9_b.jpg& data-rawwidth=&470& data-rawheight=&153& class=&origin_image zh-lightbox-thumb& width=&470& data-original=&/3cc3ba26afdc68c9a768bc9_r.jpg&&&br&&b&三、目前测试下来，flv格式不能播放\mp4很卡\avi是比较好的。&/b&&br&求前端大神们指点一下。视频弄得我很头疼，可以告诉我你们平时在网页要插入视频的时候是怎么做的，或者贴代码。简单直接。
一、视频文件格式可能是flash或者MP4的。我使用&embed&标签MP4格式的在IE和非IE浏览器下显示完全程度不一致，只有IE有视频组件（暂停，播放，声音大小调节按钮）。火狐下很卡。用网上的&object&自动识别浏览器方法也不行。二、不需要自动播放，但是需要未点击播放的时候显示预览图，而不是漆黑一片。视频不播放的时候显示预览图是不是要flash提前做好，如果不是，那要怎么编写代码？如果 autoplay:
false, 会显示…
按投票排序
目前，在见面中播放视频文件，有两种主流的办法：1. 使用H5的video标签
特别简单，但很明显的问题是，不是所有版本的浏览器都支持video标签。2. 使用flash
能播放更多格式的文件，能兼容更多的浏览器，但同样需要更强大的flash开发者支持。即使寻找开源的解决方案，也要有flash开发者才能实现定制性需求。考虑到你还要兼容IE8，那么纯粹使用video是不可能的了。只能使用flash或者video与flash混合的解决方案。
google swfobject.js
ckplayerswfobject......期待分享
主流的视频网站都已经提供了视频的html嵌入代码了，或者：
已有帐号？
无法登录？
社交帐号登录