使用HTML和JavaScript播放本地的媒體(視頻音頻)文件的方法
發(fā)布時(shí)間：2021-02-18 16:41:33 作者：軟件技術(shù)學(xué)習(xí)開發(fā)愛好者 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用HTML和JavaScript播放本地的媒體(視頻音頻)文件的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
首先提示，處于安全的需要JavaScript不能直接訪問本地資源文件，那怎么辦呢？下面介紹一種方法。在頁面中插入一個(gè)input節(jié)點(diǎn)并指定type為file，如果需要播放多個(gè)文件，可以添加屬性multiple。注冊(cè)文件節(jié)點(diǎn)被更新時(shí)的回調(diào)函數(shù)，在回調(diào)函數(shù)中調(diào)用URL.createObjectURL函數(shù)來獲取剛選擇文件的url，然后把該url設(shè)置為audio或video的src值即可。
1、使用HTML和JavaScript播放本地視頻文件的示例，源碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>播放本地的視頻文件</title>
</head>
<body>
<h3><center>視頻播放測試<center></h3>
<hr color="#666666">
<input type="file" id="file" οnchange="onInputFileChange()">
<br/>
<video id="video_id" width="520" height="360" controls autoplay loop>你的瀏覽器不能支持HTML5視頻</video>
<script>
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("video_id").src = url;
}
</script>
</body>
</html>
保存為文件名DemoF.html（在此，我將該網(wǎng)頁文件放在目錄中D:\網(wǎng)頁練習(xí)，你可根據(jù)你的實(shí)際情況而定），用瀏覽器打開顯示如下：
2、使用HTML和JavaScript播放本地音頻文件的示例，源碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>播放本地的音頻文件</title>
</head>
<body>
<h3><center>本地的音頻播放測試<center></h3>
<hr color="#666666">
<input type="file" id="file" οnchange="onInputFileChange()">
<br/>
<audio id="audio_id" controls autoplay loop>你的瀏覽器不能支持HTML5音頻 </audio>
<script>
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("audio_id").src = url;
}
</script>
</body>
</html>
保存為文件名DemoG.html（在此，我將該網(wǎng)頁文件放在目錄中D:\網(wǎng)頁練習(xí)，你可根據(jù)你的實(shí)際情況而定），用瀏覽器打開顯示如下：
單擊“選擇文件”按鈕，可以彈出“打開”文件對(duì)話框，用來加載播放的音頻文件。
到此這篇關(guān)于使用HTML和JavaScript播放本地的媒體(視頻音頻)文件的方法的文章就介紹到這了,更多相關(guān)html播放本地媒體內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了HTML5中的音頻和視頻媒體播放元素小結(jié),是網(wǎng)站頁面多媒體開發(fā)的基礎(chǔ)知識(shí),需要的朋友可以參考下2016-01-29