html5里把video的封面图片设置的宽高跟视频一样怎么做

在css 样式中 @media 标签，控制屏幕宽度让其进行自动变化。

经常为不同分辨率设备或不同窗口大小下布局错位而头疼，可以利用@media screen实现网页布局的自适应。

优点：无需插件和手机主题，对移动设备友好，能够适应各种窗口大小，只需在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的长宽值。

以下是针对自用主题而写的css，对宽度768以下设备只保留主要文章框架，以便在有限的空间里获得最佳阅读体验。

在前台直接调用

比如你路径放在 E:\1.wmv,

<%=SelPlay(@"E:\1.wmv", 500, 400)%>这样就ok了

.cs文件 直接拷贝，，

/// <summary>

/// 视频播放器(支持avi,wmv,asf,mov,rm,ra,ram),前台使用<%=SelPlay(strUrl, strWidth, StrHeight) %>

/// </summary>

/// <param name="strUrl">视频文件路径</param>

/// <param name="strWidth">播放器显示宽度</param>

/// <param name="StrHeight">播放器显示高度</param>

/// <returns>播放器内容</returns>

public string SelPlay(string strUrl, int strWidth, int StrHeight)

{

// 播放器内容

string html = ""

string Exts = string.Empty

string isExt = string.Empty

if (strUrl != "")

{

isExt = strUrl.Substring(strUrl.LastIndexOf('.') + 1).ToLower()

}

else

{

isExt = ""

}

Exts = "avi,wmv,asf,mov,rm,ra,ram"

if (Exts.IndexOf("isExt") >= -1)

{

switch (isExt)

{

case "avi":

case "wmv":

case "asf":

case "mov":

html += "<EMBED id=MediaPlayer src=" + strUrl + " width=" + strWidth + " height=" + StrHeight + " loop=false autostart=true ></EMBED>"

break

case "rm":

case "ra":

case "ram":

case "rmvb":

html += "<OBJECT height=" + StrHeight + " width=" + strWidth + " classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA>"

html += "<PARAM NAME=_ExtentX VALUE=12700>"

html += "<PARAM NAME=_ExtentY VALUE=9525>"

html += "<PARAM NAME=AUTOSTART VALUE=-1>"

html += "<PARAM NAME=SHUFFLE VALUE=0>"

html += "<PARAM NAME=PREFETCH VALUE=0>"

html += "<PARAM NAME=NOLABELS VALUE=0>"

html += "<PARAM NAME=SRC VALUE=" + strUrl + ">"

html += "<PARAM NAME=CONTROLS VALUE=ImageWindow>"

html += "<PARAM NAME=CONSOLE VALUE=Clip>"

html += "<PARAM NAME=LOOP VALUE=0>"

html += "<PARAM NAME=NUMLOOP VALUE=0>"

html += "<PARAM NAME=CENTER VALUE=0>"

html += "<PARAM NAME=MAINTAINASPECT VALUE=0>"

html += "<PARAM NAME=BACKGROUNDCOLOR VALUE=#000000>"

html += "</OBJECT>"

html += "<BR>"

html += "<OBJECT height=50 width=" + strWidth + " classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA>"

html += "<PARAM NAME=_ExtentX VALUE=12700>"

html += "<PARAM NAME=_ExtentY VALUE=847>"

html += "<PARAM NAME=AUTOSTART VALUE=0>"

html += "<PARAM NAME=SHUFFLE VALUE=0>"

html += "<PARAM NAME=PREFETCH VALUE=0>"

html += "<PARAM NAME=NOLABELS VALUE=0>"

html += "<PARAM NAME=CONTROLS VALUE=ControlPanel,StatusBar>"

html += "<PARAM NAME=CONSOLE VALUE=Clip>"

html += "<PARAM NAME=LOOP VALUE=0>"

html += "<PARAM NAME=NUMLOOP VALUE=0>"

html += "<PARAM NAME=CENTER VALUE=0>"

html += "<PARAM NAME=MAINTAINASPECT VALUE=0>"

html += "<PARAM NAME=BACKGROUNDCOLOR VALUE=#000000>"

html += "</OBJECT>"

break

}

}

else

{

html += "非法视频文件"

}

return html

}

通过html5中的video标签添加视频文件。

1、新建html文件，如图所示，在body标签中添加video标签，为video标签设置“src”属性，属性值是视频文件地址，这里以html同一目录下的“movie.mp4”视频为例：

2、此时的视频只会显示一个封面，并没有控制按钮，这时为video标签添加“controls”属性，如图所示，不需要添加属性值，可以看到视频中出现了常用的控制按钮：

3、直接插入的视频显示宽和高是视频本身默认的宽和高，这时可以给video添加我们想要的宽和高，这里以宽度400和高度300为例，添加属性“width”，属性值为“400”，添加属性“height”，属性值为“300”：

4、这时视频默认是加载完成后等待用户点击播放按钮再播放，如果需要加载完成后自动播放，可以给video添加属性“autoplay”，属性值为“autoplay”，这时视频加载完成后就会自动播放：

---