• 允许播放/暂停视频
  • 允许改变视频播放速度
  • 点击视频或按空格键播放/暂停
  • 按M键可以静音切换
  • 支持全屏模式
  • 视频播放时隐藏按钮控件
  • 文本跟语音同步并高亮文本
  • 点击文本会跳转到对应的时间点播放



<video id="video">
  <source src="video/video.mp4" type="video/mp4">
    <source src="video/video.ogg" type="video/ogg">
      <track label="English" kind="subtitles" srclang="en" src="video/captions.vtt"
          Your browser doesn't support HTML5 video.
          <a href="video/video.mp4">
          the video instead.

2. 为视频播放器添加自定义控件

<div id="videoControls">
  <input type="range" id="progressBar" value="0">
  <span id="progress">
  <div id="buttonControls">
    <button id="play">
      <img id="playImg" src="http://static.zzyzan.com/qiniu/8288/image/3aeb804997d4621860e450cdc542b9eb.png" alt="The play icon">
    <span id="duration">
      00:00 / 01:00
    <button id="fastFwd">
      1x Speed
    <button id="fullScreen">
      <img id="fullScreenImg" src="http://static.zzyzan.com/qiniu/8288/image/0a2884a027fc3564998171817ed7d59c.png" alt="The fullscreen icon">
    <input type="range" id="volume<a href=" http://www.jqueryscript.net/slider/ ">Slider</a>
    " min="0" max="1" step="0.01" value="1">
    <button id="mute">
      <img id="muteImg" src="http://static.zzyzan.com/qiniu/8288/image/3c59414b9370fe77bbac8319cc3204e7.png" alt="The mute icon">

3. 给视频添加自定义文本

<div id="transcript">
    <span data-start="0">
      Now that we've looked at the architecture of the internet, let's see how
      you might
    <span data-start="4.13">
      connect your personal devices to the internet inside your house.
    <span data-start="7.535">
      Well there are many ways to connect to the internet, and
    <span data-start="11.27">
      most often people will connect wirelessly.
    <span data-start="13.96">
      Let's look at an example of how you can connect to the internet.
    <span data-start="17.94">
      If you live in a city or a town, you probably hav a coaxial cable for
    <span data-start="22.37">
      cable Internet, or a phone line if you have DSL, running to the outside
    <span data-start="26.88">
      your house, that connects you to the Internet Service Provider, or ISP.
    <span data-start="32.1">
      If you live far out in the country, you'll more likely have
    <span data-start="34.73">
      a dish outside your house, connecting you wirelessly to your closest ISP,
    <span data-start="39.43">
      you might also use the telephone system.
    <span data-start="42.35">
      Whether a wire comes straight from the ISP hookup outside your house,
    <span data-start="46.3">
      it travels over radio waves from your roof,
    <span data-start="49.27">
      the first stop a wire will make once inside your house, is at your modem.
    <span data-start="53.76">
      A modem is what connects the internet to your network at home.
    <span data-start="57.78">
      A few common residential modems are DSL are...

4. 用CSS调整自定义视频控件样式

#videoControls {
  position: absolute;
  top: 90%;
  left: 1.5%;
  right: 1.5%;
  padding: 5px;

#progress {
  width: 0%;
  position: absolute;
  top: -10px;
  -webkit-appearance: none;
  background-color: #ff9900;
  height: 5px;
  z-index: 1;
  pointer-events: none;

#progressBar {
  width: 98.5%;
  position: absolute;
  top: -10px;
  right: 1%;
  -webkit-appearance: none;
  background-color: #6d6e6d;
  height: 5px;
  z-index: 0;

#progressBar:focus { outline: none; }
#progressBar::-webkit-slider-thumb {
 -webkit-appearance: none !important;
 height: 0;
 width: 0;
#progressBar::-moz-range-thumb {
 visibility: hidden !important;

#buttons {
  opacity: 0;
  transition: opacity .3s ease-out;

#videoContainer:hover #buttons { opacity: 1.0; }

#duration, #fastFwd {
  color: white;
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
  position: relative;
  bottom: 5px;
  left: 5px;

#mute, #closedCaption, #fullScreen, #volumeBar { float: right; }

#volumeSlider {
  width: 60px;
  float: right;
#volumeSlider::-webkit-slider-thumb {
 background-color: green;
 height: 10px;
 width: 10px;


<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/app.js"></script>
下载 在线预览 积分 (-2) 吐槽 (2)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/video/8288.html

- 评论

  • 加载中,请稍候…