Java教程

网页中的多媒体添加基础

本文主要是介绍网页中的多媒体添加基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!


视频、音频

一、在网页中添加单个视频:video元素

video属性:

  • src(源)-指定视频文件的URL

  • autoplay(自动播放)-当视频可以播放时立即开始播放

  • controls(控件)-添加浏览器为视频设置的默认控件

  • muted(静音)-让视频静音

  • loop(循环)-让视频循环播放

  • poster(海报)-指定视频加载时要显示的图像

  • width(宽度)-视频的宽度

  • height(高度)-视频的高度

  • preload(预加载)-告诉浏览器要加载的视频内容的多少。可以是以下三个值:


  • □none表示不加载任何视频


  • □metadata表示仅加载视频的元数据


  • □auto表示让浏览器决定怎样做(默认设置)

    <video src = "my-video.ext" width = "369" height = "208"> </video>

1.为视频添加控件:controls属性 会告诉浏览器添加一套用于控制视频播放的控件。

<video src = "my - video.ext" controls> </video>

2.为视频添加自动播放:autoplay属性

 <video src = "my- video.ext" autoplay controls> </video>

3.为视频指定循环播放和自动播放:loop属性

 <video src = "my- video.ext" autoplay loop> </video>

4.为视频添加指定海报图像:poster属性

 <video src = "my- video.ext" controls poster= "my-poster.jpg"> </video>

5.阻止视频预加载: preload="none"

<video src= "my- video.ext" preload = "none" controls> </video> 	

6.使用多种来源的视频和备用文本

<video controls>

<source src = "my- video.mp4" type = "video / mp4">

<source src = "my- video.webm" type = "video / webm">

</video>


二、在网页中添加带控件的单个音频文件:audio元素
<audio class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="my-audio.ext" controls></audio>

自动播放、循环和预加载音频

 <audio src = "my- audio.ext" autoplay controls> </audio>

 <audio src = "my- audio.ext"loop controls> </audio>

 <audio src = "my- audio.ext" preload="metadata" controls> </audio>

 

提供带有多个备用内容的多个视频源:

<audio  controls>

<source src = "my- audio.ogg" type = "audio / ogg">

<source src = "my- audio.mp3" type = "audio / mp3">

</audio>


作者:excavate
链接:https://juejin.cn/post/6989513618781896740
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


这篇关于网页中的多媒体添加基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!