H5_Study_Day3_新特性(3)

冬冬侠

已于 2022-06-29 23:24:08 修改

阅读量180

点赞数 1

文章标签：前端 javascript

于 2022-06-29 23:07:14 首次发布

本文链接：https://blog.csdn.net/qq_57689862/article/details/125529288

版权

接着昨天的内容，H5中的Video。

基本上很多浏览器都舍弃了flash插件，所以就可以用到<video>标签去实现flash的视频播放功能。其中video元素提供了播放、暂停和音量控制来控制视频。同时可以设置视频的width和height，如果没有设置它的宽高，视频是不会加载出来的，这点需要注意一下。

<video>支持三种视频格式：MP4、WebM、Ogg。我们可以使用JavaScript来对它的属性、事件等进行控制。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>video</title>
  </head>
  <body>
    <div style="text-align: center">
      <button onclick="playPause()">播放/暂停</button>
      <button onclick="makeBig()">放大</button>
      <button onclick="makeSmall()">缩小</button>
      <button onclick="makeNormal()">普通</button>
      <button onclick="doublePay()">x2倍数</button>
      <button onclick="normalPay()">x1倍播放</button>
      <br />
      <video id="video1" width="1000">
        <source src="video.mp4" type="video/mp4" />
        <source src="video.mp4" type="video/ogg" />
      </video>
    </div>

    <script>
      var myVideo = document.getElementById("video1");

      function playPause() {
        if (myVideo.paused) myVideo.play();
        else myVideo.pause();
      }

      function makeBig() {
        myVideo.width = 1500;
      }

      function makeSmall() {
        myVideo.width = 800;
      }

      function makeNormal() {
        myVideo.width = 1000;
      }

      function doublePay(){
        if (myVideo.pause) myVideo.play();
        myVideo.playbackRate = 2;
      }
      function normalPay(){
        myVideo.playbackRate = 1;
      }
    </script>
  </body>
</html>

上面代码中主要是采用onclick触发单击事件，其中有播放和暂停的功能、放大、缩小、倍数播放。初始定义video标签的宽度为1000px，设置点击事件makeBig函数，单击放大按钮视频会变大。基本上都是这样的形式，我写的很简单，没有进行一个点击一直累加的放大的效果，主要是为了练习，后续写完整的项目会采用这部分并且去完善它的功能。

function makeBig() {
        myVideo.width = 1500;
      }

设置视频的大小我都是用的上面的方式，视频的播放和暂停使用一个判断来确定视频是否处于播放或者暂停状态。

 if (myVideo.paused) myVideo.play();
        else myVideo.pause();

最后就是视频的倍速播放的调整，主要是调用了playbackRate属性，设置它的参数为2的话就是2倍数播放，具体几倍数的话根据自己的设定来。

        myVideo.playbackRate = 2;

效果展示：

20220629_224517

H5多媒体新标签

<embed>	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>	定义内嵌对象。
<param>	定义对象的参数。
<audio>New	定义了声音内容
<video>New	定义一个视频或者影片
<source>New	定义了media元素的多媒体资源(<video> 和 <audio>)
<track>New	规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

接下来可能就直接跳过h5的学习了，因为我觉得基本上没什么可以去复习了，大多数用到的时候看一下就知道怎么去使用了，所以接下来可能是用几天在复习一下css3，当然如果我记录的话我也是记录一下我认为需要重点记一下的地方。学完之后的话，重点还是JavaScript这点就比较头疼了，我买了快两年的js红宝书到现在也没怎么看过。先就这样。