东莞网站建设aj工作室,WordPress安装Redis,行业门户网站解决方案,购物网站开发面试目录
1. 视频标签
2. 音频标签
3. 资源标签#xff08;定义媒介资源 #xff09; 1. 视频标签
属性值描述autoplayautoplay如果出现该属性#xff0c;则视频在就绪后马上播放。controlscontrols表示添加标准的视频控制界面#xff0c;包括播放、暂停、快进、音量等…目录
1. 视频标签
2. 音频标签
3. 资源标签定义媒介资源 1. 视频标签
属性值描述autoplayautoplay如果出现该属性则视频在就绪后马上播放。controlscontrols表示添加标准的视频控制界面包括播放、暂停、快进、音量等控制按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性则当媒介文件完成播放后再次开始播放。srcURL要播放的视频的 URL。widthpixels设置视频播放器的宽度。mutedmuted静音播放视频。preloadauto、metadata、none预加载视频。可选值为 none不缓存auto自动缓存metadata仅缓存音频元数据。currentTime获取或设置当前视频的播放时间。volume获取或设置视频的音量大小范围是 0 到 1。playbackRate获取或设置视频的播放速率1 表示正常播放速度大于 1 表示加速播放小于 1 表示减速播放。
代码演示
video controls autoplay height400px width600pxsource src../video/壁纸1.mp4 typevideo/mp4
/video
结果展示 小提示 主流浏览器支持的视频格式 格式文件IEFirefoxOperaChromeSafariOgg.ogg不支持3.510.55.0不支持MPEG-4.mp49.0不支持不支持5.03.0WebM.webm不支持4.010.66.0不支持 2. 音频标签
代码演示
audio controlscontrolssource srcmusic/music.ogg typeaudio/oggsource srcmusic/music.mp3 typeaudio/mp3Your browser does not support the audio element.
/audio 小提示 主流浏览器支持的音频格式 IEFirefoxOperaChromeSafariOgg不支持3.510.53.0不支持MP39.0不支持不支持3.03.0WAV不支持4.010.6不支持3.0 3. 资源标签定义媒介资源
以下是 HTML source 标签各种属性的使用案例
3.1 src 属性的使用
video controlssource srcmyvideo.mp4 typevideo/mp4source srcmyvideo.webm typevideo/webm
/video 这个例子中我们在 video 标签中使用了两个 source 标签用于指定两种不同格式的视频文件。src 属性则指定了媒体文件的路径和文件名。 3.2 type 属性的使用
video controlssource srcmyvideo.mp4 typevideo/mp4source srcmyvideo.webm typevideo/webm
/video type 属性指定了媒体文件的 MIME 类型以便浏览器正确解析文件。在这个例子中两个 source 标签分别指定了 MP4 和 WebM 两种视频文件格式的 MIME 类型。 3.3 media 属性的使用
video controlssource srcmyvideo.mp4 media(max-width: 480px) typevideo/mp4source srcmyvideo-720p.mp4 media(min-width: 481px) typevideo/mp4
/video media 属性指定了在何种媒体设备或条件下使用该媒体文件。在这个例子中两个 source 标签使用了不同的 media 属性分别在不同的屏幕宽度条件下选择不同的视频文件。 3.4 sizes 属性的使用
video controlssource srcmyvideo-320p.mp4 sizes(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw typevideo/mp4source srcmyvideo-720p.mp4 sizes(min-width: 1025px) 50vw, 25vw typevideo/mp4
/video sizes 属性指定了媒体文件在不同屏幕尺寸下的适配大小。在这个例子中两个 source 标签使用了不同的 sizes 属性根据不同的屏幕宽度选择不同的媒体文件。 3.5 srcset 属性的使用
video controlssource srcsetmyvideo-320p.mp4 320w, myvideo-720p.mp4 720w typevideo/mp4source srcsetmyvideo-320p.webm 320w, myvideo-720p.webm 720w typevideo/webm
/video srcset 属性指定了备选媒体文件列表在不同分辨率或网络速度情况下进行选择。在这个例子中两个 source 标签分别指定了 MP4 和 WebM 两种格式的备选媒体文件列表。根据浏览器当前的分辨率和网络状况会自动选择合适的备选媒体文件。 继续学习之路 HTML一 -- 基本标签 HTML二 -- 表格设计 HTML三 -- 表单设计 HTML四 -- 多媒体设计 如果对你有帮助请帮我点一下赞我才有动力继续创作谢谢
