如何在html代码中插入MP4格式的视频

html-css011

如何在html代码中插入MP4格式的视频,第1张

代码如下,测试过,可用。

<body>

<div style="text-align:center">

<video id="video1" width="420" style="margin-top:15px">

<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />

<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />

</video>

</div>

</body>

HTML5 Audio/Video 方法

拓展资料

HTML5 <video>元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。

其中的属性(比如时长、音量等)可以被读取或设置。

其中的 DOM 事件能够通知您,比方说,<video>元素开始播放、已暂停,已停止,等等。

参考资料 w3c网页链接

<div align="center">

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="550" height="465">

<param name="AudioStream" value="-1">

<param name="AutoSize" value="-1">

<!--是否自动调整播放大小-->

<param name="AutoStart" value="1">

<!--是否自动播放-->

<param name="AnimationAtStart" value="-1">

<param name="AllowScan" value="-1">

<param name="AllowChangeDisplaySize" value="0">

<param name="AutoRewind" value="0">

<param name="Balance" value="0">

<!--左右声道平衡,最左-9640,最右9640-->

<param name="BaseURL" value>

<param name="BufferingTime" value="15">

<!--缓冲时间-->

<param name="CaptioningID" value>

<param name="ClickToPlay" value="-1">

<param name="CursorType" value="0">

<param name="CurrentPosition" value="0">

<!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0-->

<param name="CurrentMarker" value="0">

<param name="DefaultFrame" value>

<param name="DisplayBackColor" value="0">

<param name="DisplayForeColor" value="16777215">

<param name="DisplayMode" value="0">

<param name="DisplaySize" value="0">

<!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理-->

<param name="Enabled" value="-1">

<param name="EnableContextMenu" value="-1">

<!--是否用右键弹出菜单控制-->

<param name="EnablePositionControls" value="-1">

<param name="EnableFullScreenControls" value="-1">

<param name="EnableTracker" value="-1">

<!--是否允许拉动播放进度条到任意地方播放-->

<param name="Filename" value="×.wmv/×.flv" valuetype="ref">

<!--播放的文件地址-->

<param name="InvokeURLs" value="-1">

<param name="Language" value="-1">

<param name="Mute" value="0">

<!--是否静音-->

<param name="PlayCount" value="10">

<!--重复播放次数,0为始终重复-->

<param name="PreviewMode" value="-1">

<param name="Rate" value="1">

<!--播放速率控制,1为正常,允许小数-->

<param name="SAMIStyle" value>

<!--SAMI样式-->

<param name="SAMILang" value>

<!--SAMI语言-->

<param name="SAMIFilename" value>

<!--字幕ID-->

<param name="SelectionStart" value="-1">

<param name="SelectionEnd" value="-1">

<param name="SendOpenStateChangeEvents" value="-1">

<param name="SendWarningEvents" value="-1">

<param name="SendErrorEvents" value="-1">

<param name="SendKeyboardEvents" value="0">

<param name="SendMouseClickEvents" value="0">

<param name="SendMouseMoveEvents" value="0">

<param name="SendPlayStateChangeEvents" value="-1">

<param name="ShowCaptioning" value="0">

<!--是否显示字幕,为一块黑色,下面会有一大块黑色,一般不显示-->

<param name="ShowControls" value="-1">

<!--是否显示控制,比如播放,停止,暂停-->

<param name="ShowAudioControls" value="-1">

<!--是否显示音量控制-->

<param name="ShowDisplay" value="0">

<!--显示节目信息,比如版权等-->

<param name="ShowGotoBar" value="0">

<!--是否启用上下文菜单-->

<param name="ShowPositionControls" value="-1">

<!--是否显示往前往后及列表,如果显示一般也都是灰色不可控制-->

<param name="ShowStatusBar" value="-1">

<!--当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间-->

<param name="ShowTracker" value="-1">

<!--是否显示当前播放跟踪条,即当前的播放进度条-->

<param name="TransparentAtStart" value="-1">

<param name="VideoBorderWidth" value="0">

<!--显示部的宽部,如果小于视频宽,则最小为视频宽,或者加大到指定值,并自动加大高度.此改变只改变四周的黑框大小,不改变视频大小-->

<param name="VideoBorderColor" value="0">

<!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色-->

<param name="VideoBorder3D" value="0">

<param name="Volume" value="0">

<!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640-->

<param name="WindowlessVideo" value="0">

<!--如果是0可以允许全屏,否则只能在窗口中查看-->

</object>

</div>

2、其次是有的是需要rmvb 格式的

rmvb的格式受限制他到了,如果机器没有装了realplay播放器是肯定不能播放,装了的话由于解码器不一致也可能导致不能播放

代码如下:

<object classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA height=285 width=356>

<param name="SRC" value="*.rmvb">//////////////////////视频地址

<param name="CONSOLE" value="Clip1">

<param name="CONTROLS" value="imagewindow">

<param name="AUTOSTART" value="true">

<embed src="*.rmvb" autostart="true" controls="ImageWindow" console="Clip1" pluginspage=" /" target="_blank" >/"width="356" height="285">

</embed>

</object>

通过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”,这时视频加载完成后就会自动播放: