您的位置：首页 > Web前端 > JavaScript

使用 JavaScript 控制 HTML5 视频播放器

2015-06-11 10:43 609 查看

https://msdn.microsoft.com/zh-cn/library/hh924823

HTML5 video 对象提供可以用于通过 JavaScript 控制播放的方法、属性以及事件。

如何创建自己的按钮？
我能播放这种格式吗？
如何更改文件？
出错了怎么办？
我还可以对视频属性执行哪些操作？
相关主题

通过向网页中添加 HTML5 视频控件中所述的 HTML5 video 元素，可以开始在网页上使用视频元素。通过添加
JavaScript，可以以编程方式创建自定义播放控件、获取并设置当前播放位置以及更改当前视频。下面将讨论可用于控制 video 对象的某些基本方法和属性。

如何创建自己的按钮？

HTML5 video 元素具有自己的内置控件，可用于播放、暂停以及查找视频播放。以下示例使用 play 和 pause 方法来启动和停止视频，使用 currentTime 属性在视频中进行查找，以及使用 paused 属性来获取视频播放器的当前播放状态。

HTML

<script type="text/javascript">

function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}

function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}

function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>

</head>
<body>

<video id="Video1" >
//  Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
<a href="demo.mp4">Download the video</a> file.
</video>

<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>

此示例使用 HTML5 video 元素以及 source 元素在网页上设置播放器以及视频内容。视频元素只有一个 id 特性，以便使用按钮和
JavaScript 函数控制播放。按钮提供视频的播放/暂停、快进和快退以及重新开始控件。

“播放”同时也是“暂停”按钮。它没有单独的按钮，而是通过“播放”按钮的文本更改来反映该函数。单击“播放”按钮时，它调用 "vidplay()" 函数，该函数检查 paused 属性。当视频暂停时（或者刚刚加载时）暂停属性返回
True，当播放视频时返回 False。如果视频暂停，则 "vidplay()" 调用 play 方法并且“播放”按钮的 innerHTML 更改为
"||"（“暂停”的符号）。如果单击“播放”按钮时正在播放视频，则调用 pause 方法并且 innerHTML 更改为
">"（“播放”的符号）。

“重新开始” ("[]")、“后退” ("<<") 以及“前进” (>>) 按钮都使用 currentTime 属性。currentTime 属性表示当前播放位置（以秒为单位）。“播放”和“前进”按钮调用
"skip()" 函数。"skip()" 函数使用的参数表示在当前时间中增加或从中减少 10 秒钟。如果将 currentTime 设置为小于零的值或者大于视频持续时间的值，则视频播放器会将其设置为视频的开始或结束位置。重新开始 ("[]") 按钮调用" restart()" 函数，该函数只是将 currentTime 设置为零。

我能播放这种格式吗？

与使用向网页中添加 HTML5 视频控件中所示的 source 元素相比，从
JavaScript 中确定要使用的格式稍微复杂一点。但是，由于视频元素的支持不会更改，因此在你确定可用的支持之后，便可以为余下的浏览会话进行格式假设。

若要查找浏览器的格式功能，请使用 video 对象的 canPlayType 方法。 canPlayType 方法带有一个视频
MIME 类型以及一个可选的编解码器参数，并且返回三个字符串之一："empty"、"maybe" 或 "probably"。

HTML

if (myvideo.canPlayType) {
// CanPlayType returns maybe, probably, or an empty string.
var playMsg = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"');
if ("" != playMsg) {
msg.innerHTML += "mp4/H.264 is " + playMsg + " supported <br/>";
}
playMsg = myvideo.canPlayType('video/ogg; codecs="theora"');
if ("" != playMsg) {
msg.innerHTML += "ogg is " + playMsg + " supported<br/>";
}
playMsg = myvideo.canPlayType('video/webm; codecs="vp8, vorbis"');
if ("" != playMsg) {
msg.innerHTML += "webm is " + playMsg + " supported<br/>";
}
}
else {
msg.innerHTML += "no video support";
}
}

"maybe" 和 "probably" 之间的差别通常是 canPlayType 方法没有足够的信息。例如，如果缺少编解码器参数，则该方法可返回 "maybe" 以便支持 mp4。这是因为可能有不受支持的
mp4 编解码器。编解码器参数将这种支持限制为更具体的 mp4 文件版本。

canPlayType 方法返回的这三种不明确的状态使得确定浏览器是否支持该文件格式成为一项挑战。尽管不是规则，但如果浏览器返回 "maybe"，则通常表明该浏览器可以支持该格式。如果返回的字符串为
"maybe"、"probably"，则以下语句返回布尔型 true，如果字符串为空，则返回 false。

HTML

var playMsg = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"');
if ("" != playMsg) {
msg.innerHTML += "mp4/H.264 is " + playMsg + " supported <br/>";
}

上一示例中的第一行通过参数 "video/mp4; codecs="avc1.42E01E"" 调用 canPlayType 方法。然后 "if" 语句检查结果是否为空字符串之外的任何内容。如果是，则显示消息和结果。

以下示例测试三种视频格式，即 mp4、ogv 和 webm。

HTML

<!doctype html>
<html>
<head>
<title>Using multiple file formats in JavaScript</title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->
<!--  <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
</head>
<body>
<h1>CanPlayType test for multiple files</h1>
<div>The canPlayType method tests for specific video formats and codecs. <br />It returns probably, maybe, or an empty string (no support).</div>
<br />
<div>
<button onclick="checkVideoCompat();">
Test for video format type
</button>
</div>
<div id="display"> </div>

<script type= "text/javascript">
function checkVideoCompat() {
var myvideo = document.createElement('video');
var msg = document.getElementById("display");
msg.innerHTML = "";
if (myvideo.canPlayType) {
// CanPlayType returns maybe, probably, or an empty string.
var playMsg = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"');
if ("" != playMsg) {
msg.innerHTML += "mp4/H.264 is " + playMsg + " supported <br/>";
}
playMsg = myvideo.canPlayType('video/ogg; codecs="theora"');
if ("" != playMsg) {
msg.innerHTML += "ogg is " + playMsg + " supported<br/>";
}
playMsg = myvideo.canPlayType('video/webm; codecs="vp8, vorbis"');
if ("" != playMsg) {
msg.innerHTML += "webm is " + playMsg + " supported<br/>";
}
}
else {
msg.innerHTML += "no video support";
}
}
</script>

</body>
</html>

当在 Windows Internet Explorer 中使用 HTML5 元素和功能时，最好对使用的功能进行测试。在此示例中，使用 createElement 方法创建视频对象。如果已成功创建 video 对象，则语句
"if (myvideo.canPlayType)" 返回 true，并且继续执行以测试特定的文件类型。

如何更改文件？

在上面的示例中，通过在代码的 HTML 部分中使用 source 标记来指定视频源文件。若要播放多个文件，则可使用 src 属性通过
JavaScript 指定视频文件的 URL。

在此示例中，src 属性设置为文本输入字段的值。你可以键入或将兼容的视频文件的 URL 粘贴到该字段中，然后单击“加载”按钮。

HTML

<div id= "inputField" style="display:none;" >
<input type="text" id="videoFile" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button id="loadVideo" >Load</button>
</div>

单击“加载”按钮时，"getVideo()" 函数从输入字段 (URL) 中获取值并将其分配给 src 属性。然后 "getVideo()" 函数在“播放”""按钮上调用 click 方法，以便开始播放该文件。

HTML

//  load video file from input field
function getVideo() {
var fileURL = document.getElementById("videoFile").value;  // get input field
if (fileURL != ""){
video.src = fileURL;
video.load();  // if HTML source element is used
document.getElementById("play").click();  // start play
} else {
errMessage("Enter a valid video URL");  // fail silently
}
}

单击“播放”按钮时，它会调用 "vidplay()" 函数来播放或暂停。与上一示例（其中源元素只设置了一个要播放的文件）不同，"vidplay()" 首先检查 src 属性。如果该属性为空（当首次加载页面时它会为空），则调用
"getVideo()" 函数以加载文本字段中的 URL。"getVideo()" 从输入字段中获取 URL，调用 load 视频方法，然后引发播放按钮单击事件（这将播放文件）。如果该页面正在播放视频，并且向输入字段中粘贴了新的文件，则单击“加载”按钮可更改文件。

HTML

//  play video
function vidplay(evt) {
if (video.src == "") {  // on first run, src is empty, go get file
getVideo();
}
button = evt.target; //  get the button id to swap the text based on the state
if (video.paused) {   // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else {              // pause the file, and display play symbol
video.pause();
button.textContent = ">";
}
}

在以下示例中，使用 body 元素的 onload 事件调用
"init()" 函数，该函数封装了该示例中的所有功能。

HTML

<script type="text/javascript">
// Master function, encapsulates all functions
function init() {
var video = document.getElementById("Video1");
if (video.canPlayType) {   // tests that we have HTML5 video support
// if successful, display buttons and set up events
document.getElementById("buttonbar").style.display = "block";
document.getElementById("inputField").style.display = "block";

//  button events
//  Play
document.getElementById("play").addEventListener("click", vidplay, false);
//  Restart
document.getElementById("restart").addEventListener("click", function(){
setTime(0);
}, false);
//  Skip backward 10 seconds
document.getElementById("rew").addEventListener("click", function(){
setTime(-10);
}, false);
//  Skip forward 10 seconds
document.getElementById("fwd").addEventListener("click", function(){
setTime(10);
}, false);
//  set src == latest video file URL
document.getElementById("loadVideo").addEventListener("click", getVideo, false);

// fail with message
video.addEventListener("error", function(err) {
errMessage(err);
}, true);

//  button helper functions
//  skip forward, backward, or restart
function setTime(tValue) {
//  if no video is loaded, this throws an exception
try {
if (tValue == 0) {
video.currentTime = tValue;
}
else {
video.currentTime += tValue;
}

} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}
//  play video
function vidplay(evt) {
if (video.src == "") {  // on first run, src is empty, go get file
getVideo();
}
button = evt.target; //  get the button id to swap the text based on the state
if (video.paused) {   // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else {              // pause the file, and display play symbol
video.pause();
button.textContent = ">";
}
}
//  load video file from input field
function getVideo() {
var fileURL = document.getElementById("videoFile").value;  // get input field
if (fileURL != ""){
video.src = fileURL;
video.load();  // if HTML source element is used
document.getElementById("play").click();  // start play
} else {
errMessage("Enter a valid video URL");  // fail silently
}
}
//  display an error message
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent = msg;
setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
}

} // end of runtime
}// end of master
</script>

</head>
<body onload="init();">

<video id="Video1" style="border: 1px solid blue;" height="240" width="320">
HTML5 Video is required for this example
</video>

<div id="buttonbar" style="display: none;")>
<button id="restart" >[]</button>
<button id="rew" ><<</button>
<button id="play">></button>
<button id="fwd" >>></button>
</div>
<div id= "inputField" style="display:none;" >
<input type="text" id="videoFile" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button id="loadVideo" >Load</button>
</div>
<div id="errorMsg" style="color:Red;" ></div>

此示例使用 JavaScript addEventListener 方法来为按钮，而不是 HTML 中每个 button 元素上的 onclick 事件提供单击处理程序。“后退”、“前进”以及“重新开始”按钮中的每个按钮都调用
"setTime()" 函数，该函数根据传递的值设置 currentTime 视频属性。“播放”按钮调用 "vidplay()" 函数来播放文件。

注意

如果粘贴的是来自在线视频站点的视频链接，请确保它是实际的视频文件（扩展名为 .mp4、.ogv 或类似扩展名）。在 Web 上有很多用于测试视频文件的资源，但某些网站提供的 URL 用于搜索，但不提供指向文件的链接。

出错了怎么办？

编写没有任何错误的代码是一件非常困难的事情。此示例包含设计用于避免或捕获错误的内容。当运行该示例时，如果不支持 HTML5 视频，则不显示按钮。但是，如果支持视频，则某些操作会引发异常。有关使用 oncanplay 事件阻止在加载视频内容之前使用按钮的示例，请参阅使用
HTML5 视频事件。

导致异常的一个操作是在视频尚未加载时设置 currentTime 属性。在上一示例中，"setTime()" 函数代码在引发异常时显示错误消息的 try/catch 块中执行。在该示例中，将显示有帮助作用的消息，但你可以删除原始异常显示的注释。

HTML

//  skip forward, backward, or restart
function setTime(tValue) {
//  if no video is loaded, this throws an exception
try {
if (tValue == 0) {
video.currentTime = tValue;
}
else {
video.currentTime += tValue;
}

} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}

注意 F12 开发人员工具通过以下方式允许报告返回代码中的特定区域以便进行调试：向 F12 工具“控制台”或“脚本”选项卡中发送消息。向控制台发送消息时，不会中断代码执行，如调用 alert 方法就是这样。若要在使用
JavaScript 创建 Windows 应用商店应用时调试页面，请使用 Microsoft Visual Studio。有关使用 F12 工具控制台的详细信息，请参阅How to use the F12 Developer Tools。

我还可以对视频属性执行哪些操作？

使用视频属性 playbackRate、volume 和 muted，可以添加声道的播放速度控件和音量控件。以下示例添加用于增加和减少播放速率的按钮以获取旧时电影的外观，或者慢速的运动播放。以及更改音量或使声道完全静音的按钮。

HTML

// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1);  // up by 10%
}, false);

// playback speed buttons
document.getElementById("slower").addEventListener("click", function () {
video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function () {
video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function () {
video.playbackRate = 1;
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
}
}, false);

playbackRate 属性表示视频的固有或正常播放速率的放大器，其默认设置为 1。如果将该属性设置为 2，则会使播放速度加倍，而设置为 0.5 会使播放速度减半。如果在 Windows
Internet Explorer 9 中将 playbackRate 设置为负值，则会将其舍入为零，在实际中会暂停播放。在 Internet Explorer 10 中，playbackRate 为负值会造成反向播放视频。W3C
规范不建议设上限值，但 Internet Explorer 将 playbackRate 限制为最高 8x 速度。

使用 volume 属性，可以控制视频声道的音量。volume 属性接受从 0 到 1 的浮点值。volume 属性必须介于
0 和 1 之间，否则会引发异常。以下示例显示设置音量属性而不引发异常的一种方法。音量函数向当前音量中添加传入值 0.1 或 10%（正或负）。如果该值不在允许的范围 0-1 之内，则将其设置为最接近的允许值以避免异常。

HTML

// change volume based on incoming value
function setVol(value) {
var vol = video.volume;
vol += value;
//  test for range 0 - 1 to avoid exceptions
if (vol >= 0 && vol <= 1) {
// if valid value, use it
video.volume = vol;
} else {
// otherwise substitute a 0 or 1
video.volume = (vol < 0) ? 0 : 1;
}
}

当设置为 True 时，muted 属性立即将声道静音，或者当设置为 False 时将声道还原为 volume 属性设置的音量级别。以下示例显示“静音”按钮事件处理程序，该处理程序切换 muted 属性并且切换该按钮显示的图像。

HTML

document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
}
}, false);

下面是所有以前示例的完整代码列表：

HTML

<html >
<head>
<title>Full player example</title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->

<script type="text/javascript">
function init() {        // Master function, encapsulates all functions
var video = document.getElementById("Video1");
if (video.canPlayType) {   // tests that we have HTML5 video support
// if successful, display buttons and set up events
document.getElementById("buttonbar").style.display = "block";
document.getElementById("inputField").style.display = "block";

// helper functions
//  play video
function vidplay(evt) {
if (video.src == "") {  // inital source load
getVideo();
}
button = evt.target; //  get the button id to swap the text based on the state
if (video.paused) {   // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else {              // pause the file, and display play symbol
video.pause();
button.textContent = ">";
}
}
//  load video file from input field
function getVideo() {
var fileURL = document.getElementById("videoFile").value;  // get input field
if (fileURL != "") {
video.src = fileURL;
video.load();  // if HTML source element is used
document.getElementById("play").click();  // start play
} else {
errMessage("Enter a valid video URL");  // fail silently
}
}

//  button helper functions
//  skip forward, backward, or restart
function setTime(tValue) {
//  if no video is loaded, this throws an exception
try {
if (tValue == 0) {
video.currentTime = tValue;
}
else {
video.currentTime += tValue;
}

} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}
//  display an error message
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent = msg;
setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
}
// change volume based on incoming value
function setVol(value) {
var vol = video.volume;
vol += value;
//  test for range 0 - 1 to avoid exceptions
if (vol >= 0 && vol <= 1) {
// if valid value, use it
video.volume = vol;
} else {
// otherwise substitute a 0 or 1
video.volume = (vol < 0) ? 0 : 1;
}
}
//  button events
//  Play
document.getElementById("play").addEventListener("click", vidplay, false);
//  Restart
document.getElementById("restart").addEventListener("click", function () {
setTime(0);
}, false);
//  Skip backward 10 seconds
document.getElementById("rew").addEventListener("click", function () {
setTime(-10);
}, false);
//  Skip forward 10 seconds
document.getElementById("fwd").addEventListener("click", function () {
setTime(10);
}, false);
//  set src == latest video file URL
document.getElementById("loadVideo").addEventListener("click", getVideo, false);

// fail with message
video.addEventListener("error", function (err) {
errMessage(err);
}, true);
// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1);  // up by 10%
}, false);

// playback speed buttons
document.getElementById("slower").addEventListener("click", function () {
video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function () {
video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function () {
video.playbackRate = 1;
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
}
}, false);
} // end of runtime
}// end of master
</script>

</head>
<body onload="init();" >

<video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element">
HTML5 Video is required for this example
</video>

<div id="buttonbar" style="display: none;")>
<button id="restart" title="Restart button">[]</button>
<button id="slower" title="Slower playback button">-</button>
<button id="rew" title="Rewind button" ><<</button>
<button id="play" title="Play button">></button>
<button id="fwd" title="Forward button" >>></button>
<button id="faster" title="Faster playback button">+</button>
<button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
<br />
<label>Playback </label>
<label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>

<label>  Volume </label>
<button id="volDn"  title="Volume down button">-</button>
<button id="volUp"  title="Volume up button">+</button>
<button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
</div>
<br/>
<div id= "inputField" style="display:none;" >
<label>Type or paste a video URL: <br/>
<input type="text" id="videoFile" style="width: 300px;"  title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button id="loadVideo" title="Load video button" >Load</button>
</label>
</div>
<div title="Error message area" id="errorMsg" style="color:Red;"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 javascript

相关文章推荐

新的分享

章节导航