HTML5网站建设中如何添加视频和音频

2019-12-26 22:56 admin
  HTML5网站建设中如何添加视频和音频呢?煜阳网站建设制作人员整理了以下内容,供您参考。

  video标签有很多属性用于控制视频的播放:
 
src 用于指定视频文件的路径。
poster 用于指定一个图像,在当前视频播放之前或视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。
controls 用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器提供默认的播放控件(须包括播放暂停控制、播放进度控制、音量控制等)。
loop 用于指定视频是否循环播放,是一个布尔属性。
autoplay 用于设置视频是否自动播放,是一个布尔属性。
 
注意:HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于它的名字;而在标签中不使用此属性表示false。
 
preload 用于在没有设置autoplay时定义视频是否预加载,它有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。
 
None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。 
Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸、首帧图像、播放列表、持续时间等)。 
Auto:全部预加载。
 
video标签内可以包含多个source标签:
 
source标签 用于给媒体指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在video标签没有使用src属性时使用。浏览器按source标签的顺序检测标签指定的媒体是否能够播放(可能是媒体格式不支持,媒体不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。source标签本身不代表任何含义,不能单独出现。
 
此标签包含src、type、media三个属性:
 
src用于指定媒体的地址,和video标签的一样。
type:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
media:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。
除此之外,video标签内还可以包含当指定的视频都不能播放时,返回的内容。
 
示例:
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Adding HTML5 Video</title>
  </head>
  <body>
    <video src="video/snow.mp4" 
      poster="images/snow.jpg"
      width="320" height="240" 
      controls 
      autoplay 
      loop>
      <p>A video of snow in WHU</p>
    </video>
  </body>
</html>
————————————————
版权声明:本文为CSDN博主「_Silvia」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_36894564/article/details/79189771
Tag: 如何 视频 html 建设 网站
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码