<audio controls src="http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com"></audio>
如果不添加 controls 属性, 默认不会显示.
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
如果不添加 controls 属性 则不显示控件
image.png
谷歌浏览器 在加载完 之后,才会自动播放
image.png
image.png
image.png
image.png
var audio = document.createElement("audio");
// var audio = new Audio();
audio.setAttribute("controls","controls");
audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
document.body.appendChild(audio);
video 没有 Video() 构造函数
image.png
audio.play();
audio.pause();
image.png
audio.volume -= 0.1
<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange" />
<script type="text/javascript">
var audio = document.createElement("audio");
audio.setAttribute("controls","controls");
audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
document.body.appendChild(audio);
var volumeRange = document.getElementById("volumeRange");
volumeRange.onchange = function () {
audio.volume = Number(this.value);
}
</script>
image.png
image.png
<body>
volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange" /><br />
playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
<script type="text/javascript">
var audio = document.createElement("audio");
audio.setAttribute("controls","controls");
audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
document.body.appendChild(audio);
var volumeRange = document.getElementById("volumeRange");
var playbackrate = document.getElementById("playbackrate");
var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
volumeRange.onchange = function () {
audio.volume = Number(this.value);
}
playbackrate.onchange = function () {
audio.playbackRate = Number(this.value);
playbackrateSpan.innerText = this.value;
}
</script>
</body>
image.png
<body>
volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange" /><br />
playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
currentTime <input type="range" min="0" step="1" name="currentTime" id="currentTime" value="" /> <br />
<script type="text/javascript">
var audio = document.createElement("audio");
audio.setAttribute("controls","controls");
audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
document.body.appendChild(audio);
var volumeRange = document.getElementById("volumeRange");
var playbackrate = document.getElementById("playbackrate");
var currentTime = document.getElementById("currentTime");
var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
volumeRange.onchange = function () {
audio.volume = Number(this.value);
}
currentTime.onchange = function () {
var num = audio.duration;
currentTime.setAttribute("max",num);
audio.currentTime = Number(this.value);
console.log(this.value);
}
playbackrate.onchange = function () {
audio.playbackRate = Number(this.value);
playbackrateSpan.innerText = this.value;
}
</script>
</body>
image.png
image.png
image.png
image.png
相当于监听状态?
<body>
volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange" /><br />
playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
currentTime <input type="range" min="0" step="1" name="currentTime" id="currentTime" value="" /> <br />
<input type="button" name="startPause" id="startPause" value="播放" /><br />
<script type="text/javascript">
var audio = document.createElement("audio");
audio.setAttribute("controls","controls");
audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
document.body.appendChild(audio);
var volumeRange = document.getElementById("volumeRange");
var playbackrate = document.getElementById("playbackrate");
var currentTime = document.getElementById("currentTime");
var startPause = document.getElementById("startPause");
var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
startPause.onclick = function () {
if (audio.paused) {
audio.play();
this.value = "停止";
}else {
audio.pause();
this.value = "播放";
}
}
volumeRange.onchange = function () {
audio.volume = Number(this.value);
}
currentTime.onchange = function () {
var num = audio.duration;
currentTime.setAttribute("max",num);
audio.currentTime = Number(this.value);
console.log(this.value);
}
playbackrate.onchange = function () {
audio.playbackRate = Number(this.value);
playbackrateSpan.innerText = this.value;
}
</script>
image.png
用来兼容的.
image.png
<body>
volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange" /><br />
playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
currentTime <input type="range" min="0" step="1" name="currentTime" id="currentTime" value="" /> <br />
<input type="button" name="startPause" id="startPause" value="播放" /><br />
<script type="text/javascript">
var audio = document.createElement("audio");
audio.setAttribute("controls","controls");
audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
document.body.appendChild(audio);
var volumeRange = document.getElementById("volumeRange");
var playbackrate = document.getElementById("playbackrate");
var currentTime = document.getElementById("currentTime");
var startPause = document.getElementById("startPause");
var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
startPause.onclick = function () {
if (audio.paused) {
audio.play();
this.value = "停止";
}else {
audio.pause();
this.value = "播放";
}
}
volumeRange.onchange = function () {
audio.volume = Number(this.value);
}
audio.onloadedmetadata = function () {
var num = audio.duration;
currentTime.setAttribute("max",num);
}
currentTime.onchange = function () {
audio.currentTime = Number(this.value);
console.log(this.value);
}
playbackrate.onchange = function () {
audio.playbackRate = Number(this.value);
playbackrateSpan.innerText = this.value;
}
</script>
</body>
image.png
image.png
网友评论