效果圖如下：
與音視頻標籤的初次邂逅
源碼如下：
<body>
<video src="resource/video/test.mp4" controls="controls" width="500" height="500" ></video>
<audio src="resource/audio/test.mp3" controls "></audio>
</body>
音視頻兼容性寫法
源碼如下：
<body>
<video controls width="300" height="300">
<source src="resource/video/OUTPUT.mp4" type="video/mp4"></source>
<source src="resource/video/OUTPUT.ogv" type="video/ogg"></source>
<source src="resource/video/OUTPUT.webm" type="video/webm"></source>
當前瀏覽器不支持 video直接播放，點擊這裏下載視頻： <a href="resource/video/OUTPUT.mp4">下載視頻</a>
</video>
<audio controls >
<source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'></source>
<source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'></source>
<source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'></source>
當前瀏覽器不支持 video直接播放，點擊這裏下載視頻： <a href="resource/audio/OUTPUT.mp3">下載視頻</a>
</audio>
<audio src="resource/audio/OUTPUT.ogg" controls></audio>
</body>
attribute
<body>
<!--<video src="resource/video/test.mp4" autoplay muted controls width="500" height="500" poster="resource/img/xfz.png"></video>-->
<audio src="resource/audio/test.mp3" autoplay loop "></audio>
</body>
property
<body>
<video src="resource/video/test.mp4" controls width="500" height="500" ></video>
<audio src="resource/audio/test.mp3" controls ></audio>
</body>
<script type="text/javascript">
window.onload=function(){
var video = document.querySelector("video");
var audio = document.querySelector("audio");
/*video.addEventListener("loadeddata",function(){
console.log(video.duration);
})*/
/*setTimeout(function(){
console.log(video.duration);
console.log(audio.duration);
},500)*/
/*setInterval(function(){
console.log(video.currentTime);
console.log(audio.currentTime);
},1000)*/
//muted和volume之間不會同步
//muted的優先級比較高
/*
video.muted=true;
audio.muted=true;
video.volume=0;
audio.volume=0;
console.log(video.muted)
console.log(audio.muted)
console.log(video.volume)
console.log(audio.volume)
*/
/*video.volume=0.5;
audio.volume=0.5;
video.muted=true;
audio.muted=true;*/
/*console.log(video.paused)
console.log(audio.paused)
console.log(video.ended)
console.log(audio.ended)
console.log(video.error)
console.log(audio.error)
console.log(video.currentSrc)
console.log(audio.currentSrc)*/
video.poster="resource/img/xfz.png"
console.log(video.poster)
console.log(video.width)
console.log(video.height)
video.addEventListener("loadeddata",function(){
console.log(video.videoWidth)
console.log(video.videoHeight)
})
}
</script>
函數
<body>
<video src="resource/video/test.mp4" controls width="500" height="500" ></video>
<audio src="resource/audio/test.mp3" controls ></audio>
</body>
<script type="text/javascript">
window.onload=function(){
var video = document.querySelector("video");
var audio = document.querySelector("audio");
video.play();
audio.play();
setTimeout(function(){
video.pause();
audio.pause();
},5000)
}
</script>
load函數
<body>
<video controls width="500" height="500" >
<source src="resource/video/test.mp4"></source>
</video>
<audio controls >
<source src="resource/audio/test.mp3"></source>
</audio>
</body>
<script type="text/javascript">
window.onload=function(){
var video = document.querySelector("video");
var audio = document.querySelector("audio");
var source = document.querySelectorAll("source");
/*video.src="xxx";
audio.src="xxx";*/
source[0].src="xxx";
source[1].src="xxx";
video.load();
audio.load();
}
</script>
音階導航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
background: #fff;
}
a {
text-decoration: none;
display: block;
color: black;
}
ul {
list-style: none;
margin: 200px auto;
width: 908px;
height: 38px;
border: 1px solid;
overflow: hidden;
}
ul>li {
float: left;
height: 100%;
width: 100px;
text-align: center;
line-height: 38px;
}
ul>li:not(:last-child) {
border-right: 1px solid;
}
ul>li>div.down {
height: 100%;
/* background: rgb(255, 204, 153); */
transition: .5s;
}
ul>li:hover .down {
transform: translateY(-38px);
}
</style>
</head>
<body>
<div id="wrap">
<audio></audio>
<ul class="nav">
<li data-flag="a">
<a href="javascript:;">我的主頁</a>
<div class="down"></div>
</li>
<li>
<a href="javascript:;">新聞頭條</a>
<div class="down"></div>
</li>
<li data-flag="b">
<a href="javascript:;">電視劇</a>
<div class="down"></div>
</li>
<li>
<a href="javascript:;">最新電影</a>
<div class="down"></div>
</li>
<li data-flag="c">
<a href="javascript:;">腿長1米8</a>
<div class="down"></div>
</li>
<li>
<a href="javascript:;">小說大全</a>
<div class="down"></div>
</li>
<li data-flag="d">
<a href="javascript:;">旅遊度假</a>
<div class="down"></div>
</li>
<li>
<a href="javascript:;">正品團購</a>
<div class="down"></div>
</li>
<li data-flag="e">
<a href="javascript:;">今日團購</a>
<div class="down"></div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
// http://s8.qhimg.com/share/audio/piano1/g4.mp3
var liNodes = document.querySelectorAll(".nav>li");
var audio = document.querySelector("audio");
for (var i = 0; i < liNodes.length; i++) {
liNodes[i].addEventListener("mouseenter", function () {
// var flag = this.getAttribute("data-flag");
var flag = this.dataset.flag == undefined ? this.dataset.flag : this.getAttribute("data-flag");
if (flag) {
audio.src = "http://s8.qhimg.com/share/audio/piano1/" + flag + "4.mp3";
audio.play();
}
})
}
</script>
</html>
鼠標移動上去會出現聲音的哦，快玩玩這個demo吧
