H5实现视频和音乐播放确实比Android简捷多了
首先就是源文件要添加进项目里面,这里我把MP3文件和MP4文件都放在了img文件夹下面,
然后就是代码的实现,其实代码也比较简单的,全都是调用指令,设置播放按钮,做一些语法处理啦,直接上代码了,不多说,毕竟我也是初学者
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
//MP3文件
<div style="text-align: center;">
//设置放置位置
<audio src="img/music.mp3", controls="controls"></audio>
//添加进MP3文件的地址
</div>
<br /><br />
//MP4文件
<div style="text-align:center;">
//设置放置位置
//每个按钮设置自己的方法,在后面对方法进行逻辑处理
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br /><br />
<video id = "video1" width="320", height="240", controls="controls">
//设置初始尺寸
<source src="img/mv.mp4", type="video/mp4"></source>
<source src="img/mv.mp4", type="video/ogg"></source>
</video>
</div>
<script type="text/javascript">
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused){
myVideo.play();
} else {
myVideo.pause();
}
}
function makeBig() {
myVideo.width = 1080;
myVideo.height = 720;
}
function makeSmall() {
myVideo.width = 480;
myVideo.height = 240;
}
function makeNormal() {
myVideo.width = 720;
myVideo.height = 480;
}
</script>
</body>
</html>