关于html内嵌video的一些参数设置

 时间:2024-10-12 03:48:29

1、【视频标签】首先,我们在页面中添加vedio标签,<video></video>,然后在其中添加内容。默认的自动补全的video标签内容是截图中这样的。

关于html内嵌video的一些参数设置

2、【视频路径】必须要添加的是视频的锭缠愁颊路径,在video里面添加,<source src="">,这样一个视频就被引入进来了。这里需要我们定义好视频的格式。type租涫疼迟="video/mp4"。这样打开网页后,就会看到视频了。

关于html内嵌video的一些参数设置

3、【自动播放】默认,直接放上视频,在浏览器里面是无法播放的,我们需要为其添加播放的参数,自动播放的参数是autoplay,可以直接添加autoplay,或者将其设置为true

关于html内嵌video的一些参数设置

4、【循环播放】视频自动播放后,播放一次就会停止,我们需要为其添加循环播放的参数,loop,也可以设置loop="true"二者功能相同。这样视频就可以无限次循环播放了。

关于html内嵌video的一些参数设置

5、【视频大小】我们还需要根据网页的实时需求,来给网页定义视频的大小,位置。如果只定义宽高中的一种,那么另一个宽或者高将根据视频比例,自动缩放,如果宽高超出了视频自有的比例,超出比例的部分是空白的,video会占据我们设置的宽高大小的空间。

关于html内嵌video的一些参数设置关于html内嵌video的一些参数设置

6、【视频背景图片】有时候,在线的视频,由于文件较大,需要很长的缓冲时间,这时候,我们可以通过给视频设置一个背景图片, 来提高用户的体验效果。需要用到参数poster=""

关于html内嵌video的一些参数设置

7、【嵌入网站后,无法播放】有时候,视频嵌入到网站中后,在chrome浏览器中无法播放,在firefox中可以,这时候,可以通过添加一个js函数来改进。

关于html内嵌video的一些参数设置

8、最后,给大家一段完整的代码<箪滹埘麽video width="1000" height="600" autoplay="true" loop="true" poster="**.jpg"> <source src="**.mp4" type="video/mp4"> </video> <script type="text/javascript"> $(function() { $('video').each(function() { this.play(); }); }); </script>

  • 望远镜观鸟小知识
  • 手工折纸——旺旺
  • div+css网页布局有哪些缺陷的缺陷
  • jquery怎么显示div内的内容
  • 如何利用ps制作颗粒状效果
  • 热门搜索
    湄洲岛旅游攻略 云南西双版纳旅游 上海商贸旅游学校 本溪旅游攻略 重庆市旅游局 房山旅游景点大全 旅游文章 阿勒泰旅游 三峡大坝旅游 宁夏旅游景点