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

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

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

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

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

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

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

myself.html

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

html/myself.html

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

舉個(gè)栗子

看這是一個(gè)網(wǎng)頁(yè)的時(shí)候

這是代碼

<!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)不了自動(dòng)播放的效果

下面重頭戲來(lái)了

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

index的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<a href="music.html">音樂(lè)</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>

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

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

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