在HTML中加入视频有多种方法,以下是一些常见的方法:
1、使用<video>
标签
<video>
标签是HTML5中新增的标签,用于在网页中嵌入视频,使用这个标签非常简单,只需要将视频文件的路径放在src
属性中即可。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video>
在这个例子中,我们设置了视频的宽度和高度,并添加了控制器。<source>
标签用于指定视频文件的来源,可以设置多个来源,以适应不同的浏览器,如果浏览器不支持<video>
标签,将显示最后一行文本。
2、使用<embed>
标签
<embed>
标签也是HTML5中新增的标签,用于在网页中嵌入其他插件内容,如Flash播放器,使用这个标签的方法与<video>
类似,只需将视频文件的路径放在src
属性中即可。
<embed width="320" height="240" src="movie.swf" type="application/x-shockwave-flash">
在这个例子中,我们设置了视频的宽度和高度,并将视频文件的路径放在src
属性中,需要注意的是,这里使用的是Flash播放器的视频文件(扩展名为.swf),而不是HTML5支持的视频格式(如.mp4、.ogg等)。
3、使用<object>
标签
<object>
标签是HTML4中就存在的标签,用于在网页中嵌入其他插件内容,使用这个标签的方法与<video>
类似,只需将视频文件的路径放在data
属性中即可。
<object width="320" height="240" data="movie.swf"> <param name="movie" value="movie.swf"> <param name="quality" value="high"> <embed src="movie.swf" quality="high" width="320" height="240"> </object>
在这个例子中,我们设置了视频的宽度和高度,并将视频文件的路径放在data
属性中,我们还添加了两个参数,一个是movie
参数,用于指定视频文件的路径;另一个是quality
参数,用于指定视频的质量,需要注意的是,这里同样使用的是Flash播放器的视频文件(扩展名为.swf),而不是HTML5支持的视频格式(如.mp4、.ogg等)。
4、使用第三方播放器库
除了以上三种方法外,还可以使用第三方播放器库,如Video.js、JW Player等,这些播放器库通常提供了丰富的功能和更好的兼容性,但需要引入相应的JavaScript文件和CSS样式表,使用Video.js播放器库的方法如下:
在HTML文件中引入Video.js的JavaScript文件和CSS样式表:
<link href="https://vjs.zencdn.net/7.11.4/video-js.min.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
在HTML文件中添加一个<video>
标签,并为其添加一个类名(如"my-video"):
<video class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{}'> <source src="movie.mp4" type="video/mp4"> <p class="vjs-no-js">要查看此视频,请启用JavaScript,并考虑升级到支持HTML5视频的Web浏览器</p> </video>
初始化Video.js播放器:
<script> var player = videojs('my-video'); </script>
这样,就可以在网页中加入一个支持多种格式的视频播放器了。