HTML中實(shí)現(xiàn)音樂或視頻自動播放案例詳解

發(fā)布時間：2022-05-27 16:41:06 作者：五小悟

由于期末大作業(yè)我想插入一個背景音樂，實(shí)現(xiàn)點(diǎn)開網(wǎng)頁就會自動播放音頻的效果，今天通過本文給大家分享下我基于HTML實(shí)現(xiàn)音樂或視頻自動播放功能，代碼簡單易懂，需要的朋友參考下吧

由于期末大作業(yè)我想插入一個背景音樂，實(shí)現(xiàn)點(diǎn)開網(wǎng)頁就會自動播放音頻的效果。于是我按照書上的案例寫了如下代碼

<audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>

但是效果并不理想，打開了網(wǎng)頁并不會自動播放，于是乎，我百度了各種各樣的方法，但始終沒有實(shí)現(xiàn)想要的效果。于是在整理大作業(yè)的偶然間，我居然發(fā)現(xiàn)了真相！

首先看原本的代碼打開路徑,就是一個單純的網(wǎng)頁

myself.html

再看能成功實(shí)現(xiàn)自動播放的網(wǎng)頁路徑

html/myself.html

發(fā)現(xiàn)問題所在沒？問題就出現(xiàn)在跳轉(zhuǎn)上，也就是說想實(shí)現(xiàn)自動播放背景音樂的效果不能應(yīng)用在首頁路徑上，而是要放在后面的路徑。

舉個栗子

看這是一個網(wǎng)頁的時候

這是代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>
</body>
</html>

然而這實(shí)現(xiàn)不了自動播放的效果

下面重頭戲來了

此時我創(chuàng)建了兩個文件夾

index的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<a href="music.html">音樂</a>
</body>
</html>

music的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>music</title>
</head>
<body>
<audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>
</body>
</html>

這個就可實(shí)現(xiàn)自動播放的效果了

總結(jié)一下，兩個方法在代碼上沒什么區(qū)別，第二種方法就是多了一個跳轉(zhuǎn)網(wǎng)頁的操作而已。小編推測可能是在html中音頻自動播放需要緩沖時間，但是在單獨(dú)使用一個網(wǎng)頁時沒有緩沖時間，而用跳轉(zhuǎn)網(wǎng)頁恰恰彌補(bǔ)了這一緩沖時間。

到此這篇關(guān)于HTML中實(shí)現(xiàn)音樂或視頻自動播放的文章就介紹到這了,更多相關(guān)html自動播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！