详解如何使用JavaScript创建video原始播放器

通过使用HTML5新添加的video标签，在HTML中嵌入视频变得非常容易。

所以这一次我们来看一下如何使用video标签以及如何使用JavaScript轻松控制视频并创建一个原始播放器。

如何将video标签写入HTML5

用HTML5编写非常简单。指定视频有两种主要方法。作为最简单的方式，只需指定带有video标签和 src的视频，如下所示。

<video src="sample.mp4"></video>

另一种方法是指定多种格式的视频，如下所示，以便它们可以在各种浏览器环境中播放。

<video>
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
</video>

目前通过指定mp4格式的视频，可以在大多数最新的浏览器上播放，包括iPhone和Android，所以基本上只要mp4格式就可以了。

video标签的属性

上文中的例子只是简单的在video标签中指定了视频，所以不能直接播放。通过指定以下属性，可以指定基本设置，例如视频的自动播放和播放器的显示。

controls属性

通过指定controls，可以显示控制video播放的播放器。

<video src="sample.mp4" controls></video>

poster属性

通过在“poster”中指定图像，可以在播放视频之前显示缩略图。

<video src="sample.mp4" poster="first.jpg"></video>

autoplay属性

autoplay只需指定名称，就可以将视频设置为自动播放。

注意：在chrome和safari中，需要用muted属性将视频设置为静音，否则它不会自动播放。

<video src="sample.mp4" autoplay muted></video>

loop属性

通过指定“loop”，可以循环播放视频。

<video src="sample.mp4" loop></video>

preload属性

通过指定“preload”，可以在视频播放前预读数据，消除实际播放时的通信压力。可以指定三个值：auto、metadata、none。auto下载“整个视频数据”，而metadata只下载“视频大小、视频列表、播放时间等”的元数据。none指定在播放前不下载任何内容。

preload如果没有描述，则默认应用auto，所以如果视频播放不是重要的内容，可以指定none，避免给用户带来不必要的负担。

playinline属性

在iPhone等iOS中，播放视频时，默认会启动一个单独的窗口并播放视频，但从iOS 10开始，playsinline属性可以让视频在小窗内播放，即不全屏播放。

但是，要进行内嵌播放，autoplay、muted、playsinline三个属性是必需的。

<video src="sample.mp4" playsinline autoplay muted></video>

如何指定video标签的播放范围

在video标签中，通过在视频文件名后面写“#t=5,10”，可以指定播放范围，格式为“从第5秒到第10秒播放”。

<video src="sample.mp4#t=5,10" autoplay muted></video>

通过使用JavaScript操作video标签来创建原始播放器

使用video标签，您可以通过简单的JavaScript（也可以使用 jQuery）来控制播放、停止等。

操作方法很简单，只需要在html中创建一个合适的按钮，在JavaScript中给按钮点击分配一个已有的方法（指令）即可。

这次，通过一个简单的例子，我将解释如何操作“播放”、“暂停”、“停止”、“音量控制”和“音量显示”。

HTML代码

第一个是HTML代码。如上所述，使用video 标签指定视频并添加一个简单的按钮来控制它。

<video id="video01" src="movie.mp4"></video>
<div id="play">播放</div>
<div id="stop">暂停</div>
<div id="atama">停止</div>
<div id="vol-up">音量+</div>
<div id="vol-down">音量-</div>
<div id="mute">静音</div>
<p>音量：</p>
<div id="vol"></div>

JavaScript代码

接下来是JavaScript的编写。我们按照jQuery中的规范方法在video标签中指定视频文件的ID转换为变量后，只需为每个按钮的点击事件指定“play()、pause()”等方法即可。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){ 
 // 指定要操作的视频
 var video = $('#video01').get(0); 
 // 播放视频
 $('#play').click(function(){
  video.play();
 }); 
 // 暂停视频
 $('#stop').click(function(){
  video.pause(); 
 });
 // 视频位置（移动到任意秒）
 $('#atama').click(function(){
  video.currentTime = 0; //可以设置视频移动到输入秒的位置（例如0秒）
 });
 // 视频静音
 $('#mute').click(function(){
  video.muted = video.muted ? false : true;
 }); 
 //音量+
 $('#vol-up').click(function(){
  if(video.volume <= 0.75){
     video.volume = video.volume + 0.25;
     $("#vol").text(video.volume);
  }
 }); 
 //音量-
 $('#vol-down').click(function(){
  video.volume = video.volume - 0.25;
  $("#vol").text(video.volume);
 });
 //当前音量
 $("#vol").text(video.volume);
});
</script>

JavaScript代码到此结束。

通过以上的方法可以简单地用JavaScript控制video标签的视频，之后可以通过使用CSS和图片做成自己原创风格的播放器界面。