html5为你的网页添加视频播放器
在html5中通过video标签为网页添加视频播放功能。
video元素支持三种视频格式：ogg,mpeg4,webm
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件
以下是video标签的相关属性。
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
srcurl要播放的视频的URL。
widthpixels设置视频播放器的宽度。下面是一个小实例：
<!DOVTYPEhtml>
<html>
<head>
<title>我爱学习</title>
</head>
<body>
<videocontrols="controls">
<sourcesrc="song.ogg"type="audio/ogg">
<sourcesrc="song.mp3"type="audio/mpeg">
Yourbrowserdoesnotsupporttheaudiotag.
</video>
</body>
</html>
1、首先打开sublime编译器，创建一个.html文件。
2、然后在title标签之间写上标题的名称，这里输入视频播放器。
3、接着在body标签对的之间插入<video>标签。
4、然后设置视频窗口的大小，在video标签添加width和height属性。
5、最后在video标签之间添加source播放源，及其地址运行后，就会出现如下图视频窗口。
工具／原料：
联想小新潮7000-13
Win 10
Visual Studio Code1.47.2
1、进入Visual Studio Code，新建html文件
打开Visual Studio Code软件，打开工作区空间，选择需要进行 *** 作的文件夹，点击上方的新建文件选项。
2、给html文件命名为video.html
在d出的文本框中给html文件命名，文件命名为video.html。
3、输入添加视频文件的代码
在新建的．html文件中输入添加视频文件的html代码：
<video src="../media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>。
4、使用工具查看代码效果
在代码的空白区域右击—＞在d出的选项卡中选择Open In Default Browser选项。
5、显示视频文件
点击运行之后，在浏览器网页中显示添加的视频文件，点击播放按钮，正常播放视频。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）