H5新增的多媒体标签

最新推荐文章于 2021-06-04 13:37:51 发布

一只追求学习的学渣

最新推荐文章于 2021-06-04 13:37:51 发布

阅读量142

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/weixin_44079801/article/details/106968049

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 300px;
        }
    </style>
</head>

<body>
    <!-- <audio src="02_media/123.mp3" controls="controls" loop="loop"></audio> -->
    <audio controls="controls">
        <source src="02_media/123.mp3" type="audio/mpeg">  
        <source src="02_media/123.ogg" type="audio/ogg">     
    </audio>
    <!-- <video src="02_media/456.mp4" controls="controls"></video> -->
    <video muted="muted" loop="loop" poster="02_media/789.jpg" controls="controls">
        <source src="02_media/456.mp4" type="video/mp4" />
        <source src="02_media/456.ogg" type="video/ogg" />
        您的版本太低，不支持播放
    </video>
</body>

</html>
<!-- 音频:audio 
    audio属性:autoplay：有该属性，则音频在就绪后马上播放(谷歌浏览器已禁用)
    controls: 有该属性，则向用户显示控件，例如:播放
    loop:有该属性,音频结束时重新播放
    src:要播放音频的路径
    解决浏览器适配问题，即：配置多个音频属性。
视频:video 
autopaly:自动播放，谷歌浏览器不支持,解决办法是加静音属性muted
静音muted:muted
controls:向用户显示播放控件
width:pixels(像素)设置播放器宽度
height:pixels(像素)设置播放器高度
循环播放:loop 
规定是否预加载视频(如果有autoplay,就忽略该属性)preload:auto(预先加载视频)none(不应加载视频)
src:url(视频url路径)
加载等待的画面图片:poster:lmgurl  -->

一只追求学习的学渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5新增的多媒体标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> video {
复制链接

扫一扫

专栏目录