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

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

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

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

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

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

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

myself.html

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

html/myself.html

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

舉個(gè)栗子

看這是一個(gè)網(wǎng)頁的時(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)播放的效果

下面重頭戲來了

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

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>

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

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

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