JavaScript Source对象(Source Object)

Source对象代表了HTML文档中的source元素

如何访问Source对象?

使用getElementById()访问source元素。

var  x = document.getElementById("mySource");

如何创建Source对象

使用createElement()方法创建source元素。

var x = document.createElement("source");

标准属性及事件

Source对象同时支持标准的属性事件

Source对象的属性
属性 说明
media 设置或返回source元素的media属性的值
src 设置或返回source元素的src属性的值
type 设置或返回source元素的type属性的值

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问SOURCE元素?</h3>

<audio controls>

<source id="myS" src="../../html5/material/audio.mp3" type="audio/mp3">

<source src="../../html5/material/audio.ogg" type="audio/ogg">

使用的浏览器不支持播放

</audio>

<p>点击以下按钮,获取媒体文件的URL</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myS").src;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建SOURCE元素?</h3>

<audio controls id="myAudio" autoplay>

使用的浏览器不支持播放!

</audio><br>

<p>点击以下按钮,创建source元素并添加到audio元素</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.createElement("SOURCE");

x.setAttribute("src", "../../html5/material/audio.mp3");

x.setAttribute("type", "audio/mp3");

document.getElementById("myAudio").appendChild(x);

var y = document.createElement("SOURCE");

y.setAttribute("src", "../../html5/material/audio.ogg");

y.setAttribute("type", "audio/ogg");

document.getElementById("myAudio").appendChild(y);

document.getElementById("demo").innerHTML = "声音播放器现在能够播放!";

}

</script>

</body>

</html>

关联内容