HTML5 播放video或者audio-阿里云开发者社区

HTML5 播放video或者audio

2017-11-21 1577

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

众所周知，在HTML5诞生之前网页上要播放一段视频基本都是依靠flash插件，而HTML5诞生了<video>和<audio>标签，使得在HTML5上播放视频或者音频就像显示图片那么轻松，就像显示图片用的 <img src="">一样，现在嵌入视频音频只要<video src="">或<audio src="">。

我这里举了一个例子，这里只使用了HTML5最常见的<video><audio>的API。

HTML显示了<video>这个控件的用法。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5 Media DEMO</title>
<script type="text/javascript" src="js/media.js"></script>
</head>
<body>
<h2>HTML5 media 演示</h2>
<video id="video" width="400" height="300" autoplay loop>
</video>
<br/>
视频地址：<input type="text" id="videoUrl"/>
<input id="playButton" type="button" onclick="playOrPauseVideo()" value=" 播放"/>
<span id="time"></span>
</body>

然后javascript就负责响应点击事件，以及更新时间区域（已经播放时间/总时间）的信息，非常浅显易懂。

/**
* This file is confidential by Charles.Wang
* Copyright belongs to Charles.wang
* You can make contact with Charles.Wang (charles_wang888@126.com)
*/
function playOrPauseVideo(){
//从文本框中取得用户输入的视频url
var videoUrl= document.getElementById("videoUrl").value;
console.log("videoUrl: "+videoUrl);
//取得video控件
var video = document.getElementById("video");
//为video控件绑定事件处理函数,这些事件都是HTML5的已经定义好的事件，最后一个参数boolean型表示事件是否要"冒泡"
//这里对应“更新时间”的事件，然后在<span id="time">中显示时间相关信息
video.addEventListener("timeupdate" , function (){
//取得要显示time的区域
var timeDisplay=document.getElementById("time");
//用秒为单位来显示当前的播放进度,currentTime和
timeDisplay.innerHTML=Math.floor(video.currentTime)+"/"+Math.floor(video.duration)+"(秒)";
},
false
);
//这里因为要考虑到暂停和继续两种状态，所以必须先判断媒体的当前状态
//如果video当时是暂停状态（这是HTML5 audio(video)的内置属性）
if (video.paused){
//暂停分2种情况，一种是播放旧媒体的结束的停止，一种是已经开始播放一段时间后的暂停
//对于旧的媒体结束的情况，那么判断条件就是用户输入的地址不同于当前地址（因为用户选择播放新媒体）
if(videoUrl != video.src){
//那么吧当前video的src属性配置为用户所输入的地址
video.src=videoUrl;
//然后让媒体重新装载媒体进行播放,这个load()方法也是video自带的方法
video.load();
}
//如果是播放了一段时间的暂停，那么很简单，只要播放之就可以了，不需要任何改变，这时候video的parsed属性被自动设置为false
else{
video.play();
}
document.getElementById("playButton").value="暂停";
}
else{
video.pause();
document.getElementById("playButton").value="播放";
}
}