html5的视频和音频使用

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { color: rgb(28, 203, 206); font-size: 12px; line-height: 1.5; } </style> </head> <body> <h1> helloword </h1> <div> <div> hahha </div> </div> <textare name="text" id="text" clos="30" rows="10">
</textare>
<!--谷歌浏览器禁止使用了autoplay
    属性                值                  描述
    autoplay        autoplay        如果出现了该属性,则音频就绪后马上播放
    controls        controls        如果出现了该属性,则向用户显示控件,比如播放按钮
    loop            loop            如果出现了该属性,则音频结束时播放
    src             url             要播放音频的Url
    muted           muted           静音播放
-->
<!-- <audio src="G:\office_visa\office_visio\阿悠悠-念旧.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio> -->
<!--声音播放器的适配,可以用格式工厂转换格式-->
<audio controls="controls" loop="loop">
    <source src="G:\office_visa\office_visio\阿悠悠-念旧.mp3" type="audio/mpeg">
    <source src="G:\office_visa\office_visio\阿悠悠-念旧.ogg" type="audio/ogg">
    你的播放器太low了,不支持audio播放
</audio>

<!--
    谷歌浏览器禁止使用autoplay,可以用muted静音播放
    属性                值                          描述
    autoplay           autoplay                   如果出现了该属性,音频就绪后自动播放
    controls           controls                   如果出现了该属性,向用户显示播放控件
    width              pixels(像素)               设置播放器的宽度   
    height             pixels(像素)               设置播放器的高度
    loop               loop                       如果出现了该属性,则音频结束时候轮循播放
    preload            auto(预先加载)              规定是否加载完再播放(如果有了autoplay就忽略该属性)
                       none(不应加载视频)
    src                url                        视频的url地址
    poster             Imgurl                     加载等待的画面图片
    muted              muted                           静音播放 
-->
<!-- <audio src="G:\office_visa\office_visio\阿悠悠-念旧.mp4" controls="controls" loop="loop"></audio> -->

<!--
    vedio支持的格式
    格式                IE          Firefox         OPera       Chrome      Safari
    Ogg                 No          3.5+            10.5+       5.0+        No
    MPEG4               9.0+        No              No          5.0+        3.0+
    WebM                No          4.0+            10.6+       6.0+        No
-->
<!--视频播放器的适配-->
<video controls="controls" loop="loop" width="300px" poster="C:\Users\Administrator\Pictures\Saved Pictures\1.png">
    <source src="G:\office_visa\office_visio\阿悠悠-念旧.mp4" type="audio/mpeg">
    <source src="G:\office_visa\office_visio\阿悠悠-念旧.ogg" type="audio/ogg"> 你的播放器太low了,不支持vedio播放
</video>
</body>
posted @ 2021-03-23 14:23  我是一只老白兔  阅读(33)  评论(0编辑  收藏  举报