10.video()和audio()的基本用法及如何解决谷歌页面加载播放问题

最新推荐文章于 2022-02-17 14:10:07 发布

原创

最新推荐文章于 2022-02-17 14:10:07 发布 · 996 阅读

5 ·

CC 4.0 BY-SA版权

HTML5中的`video`和`audio`元素用于播放视频和音频，它们拥有相似的属性如`controls`、`autoplay`、`muted`和`loop`。由于谷歌浏览器更新后禁止自动播放，可以使用`muted`属性实现自动播放。此外，通过`play()`、`pause()`方法和`onended`事件可以控制播放状态。若要解决谷歌页面加载播放问题，可以考虑使用`embed`标签。

如果要播放视频用video 如果要播放音频用audio
他们两所有属性和用法都是一样的，只不过video专门放视频，audio专门放音频
默认都没有控制条，要想有就加一个属性：controls
autoplay 自动播放
muted 静音
loop：循环播放
谷歌自从18年初更新后的浏览器都不允许自动播放（出于禁止广告的目的）
但是如果你打开后，再刷新一下，也还是能自动播放的
如果你不想刷新第一次打开就想自动播放，那么得加一个属性muted
JS的方法：
play() 播放视频
pause() 暂停
事件：
onended 当播放完成调用


    <body>

    <!-- <video src="images/video/1.mp4" controls autoplay loop></video>

    <audio src="images/audio/郝云 - 活着.mp3" controls autoplay loop></audio> -->

    <!-- <input type="button" value="点我" id="btn"> -->

       
    <!-- <video controls> -->
    <!-- 看浏览器是否支持这种视频格式，如果支持就放这一个 -->
    <!-- <source src="images/video/rabbit.ogg"> -->
    <!-- 再看下一个是否支持 -->
    <source src="images/video/movie01.mp4">
    <!-- 你的浏览器版本过低，请下载最新谷歌！<a href="">点我下载</a> -->
    <!-- 小妹下海写代码很辛苦，请下载最新浏览器，体验小妹精心准备的超美布局