Web多媒体入门 | 青训营笔记

还有头发的萝卜头
122 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

笔记大纲

  1. Web多媒体历史
  2. 基础知识
  3. 应用场景
  4. 个人总结与思考
  5. 引用参考

详细介绍

Web多媒体历史

  1. Flash
  2. Html5
  3. Media Source Extensions

基础知识

编码格式

图像基本概念

图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度：图像深度是指存储每个像素所需要的比特数。

视频基本概念

分辨率: 每一帧的图像分辨率。

帧率: 视频单位时间内包含的视频帧的数量。

码率: 就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。

编码数据处理流程

lc他、.png

图片来源：字节跳动青训营第四届，Web多媒体入门课程

封装格式

fzgs.png

图片来源：字节跳动青训营第四届，Web多媒体入门课程

fzgs1.png

图片来源：字节跳动青训营第四届，Web多媒体入门课程

多媒体元素和拓展API

  1. video
  2. audio
  3. MSE
video元素

视频播放器（下面会详细介绍包括方法、属性、事件）

    <html>
  <body>
    <video src="./vodeo.mp4" muted autoplay controls width="600" height="300"></video>
    <video muted autoplay controls width="600" height="300">
      <source src="./video.mp4"></source>
    </video>
  </body>
</html>

audio元素

音频播放器（下面会详细介绍包括方法、属性、事件）

<html>
  <body>
   <audio src="./audio.mp3" muted autoplay controls width=600 height=300></audio>
   <audio muted autoplay controls width=600 height=300></audio>
    <source src="./audio.mp3"></source>
  </body> 
</html>

video audio 元素方法

方法描述
paly()开始播放音频/视频
pause()暂停当前播放的音频/视频
load()重新加载音频/视频
canPlayType()检查浏览器是否能播放指定的音频/视频类型
addTextTrack()向音频/视频添加新的文本轨道

首先写一个video标签（id是‘vs’）三个button按钮，分别添加onclick()事件（点击事件），其方点击事件绑定的方法分别操作id为‘vs’的video元素的dom，给video元素添加paly()、pause()、load()方法，让视频播放、暂停、重新加载。

<html>
  <body>
        <button onclick="playVid()">播放视频</button>
        <button onclick="pauseVid()">暂停视频</button>
        <button onclick="loadVid()">重新加载视频</button>
        <video id="vs" src="demo.mp4"></video>
        <script>
          const myVideo = document.getElementById("vs");
            function playVid() {
                myVideo.play();
            }
            function pauseVid() {
                myVideo.pause();
            }
            function loadVid() {
                myVideo.load();
            }
        </script>
  </body>
</html>

video audio 元素属性

属性描述
autoply设置或返回是否在加载完成后随即播放音频/视频
controls设置或返回音频/视频是否显示控件（比如播放/暂停等等）
currtenTime设置或返回音频/视频中的当前播放位置
duration返回当前音频/视频的长度
src设置或返回音频/视频的当前来源
volume设置或返回音频/视频的音量
buffered返回表示音频/视频已缓冲部分的TimeRanges对象
palybackRate设置或返回音频/视频的播放速度
error返回表示音频/视频错误状态的MediaError对象
readyState返回音频/视频当前的就绪状态

首先写一个video标签（id是‘vs’）四个button按钮，分别添加onclick()事件（点击事件），其方点击事件绑定的方法分别操作id为‘vs’的video元素的dom，四个按钮分别给id为‘vs’的video元素添加：返回音频/视频的音量，设置音频/视频的音量为20，返回音频/视频的当前播放位置，设置音频/视频的播放位置。

<html>
  <body>
        <button onclick="getVolome()">音量多少？</button>
        <button onclick="setVolume()">将视频音量设置为20</button>
        <button onclick="getCurTime()">获得当前播放时间</button>
        <button onclick="setCurtime()">等待播放时间设置为第5秒</button>
        <video id="vs" src="demo.mp4"></video>
        <script>
          const myVideo = document.getElementById("vs");
            function getVolome() {
                alert(myVideo.getVolome);
            }
            function setVolume() {
                myVideo.setVolume = 0.2
            }
            function getCurTime() {
                alert(myVideo.getCurTime);
            }
             function setCurtime() {
               myVideo.setCurtime = 5
            }
        </script>
  </body>
</html>

video audio 元素事件

事件描述
loadedmetatada当浏览器已加载音频/视频的元素数据时触发
canpaly当浏览器可以开始播放音频/视频时触发
play当浏音频/视频已开始或不再暂停时触发
playing前音频/视频在因缓冲而暂停或停止后已就绪时触发
pause当音频/视频已暂停时触发
timeupdate当目前的播放位置已更改时触发
seeking当用户开始移动/跳跃到音频/视频中的新位置时触发
seeked当用户已移动/跳跃到音频/视频中的新位置时触发
waiting当视频由于需要缓冲下一帧而停止时触发
ended当，目前的播放列表已结束时触发

首先写一个video标签（id是‘vs’）,分别给id为‘vs’的video元素添加事件，分别是当浏览器可以开始播放音频/视频时触发（alert('canplay')），当音频/视频已暂停时触发（alert('pause')），当浏音频/视频已开始或不再暂停时触发（ alert('play')），当视频由于需要缓冲下一帧而停止时触发（alert('waiting')）。

<html>
  <body>
   
        <video id="vs" src="demo.mp4"></video>
        <script>
          const myVideo = document.getElementById("vs");
           myVideo.addEventListenner('canplay',function(){
             alert('canplay');
           });
           myVideo.addEventListenner('pause',function(){
             alert('pause');
           });
            myVideo.addEventListenner('play',function(){
             alert('play');
           });
            myVideo.addEventListenner('waiting',function(){
             alert('waiting');
           });
        </script>
  </body>
</html>

应用场景

cj.png

图片来源：字节跳动青训营第四届，Web多媒体入门课程

个人总结与思考

1.重点

  • 基础知识
  • 应用场景

2.难点

  • 基础知识 (如何构建一个视频或音频播放器，如何操作视频/音频播放器的方法、属性、事件)

3.思考
思考如何构建一个视频或音频播放器，如何操作视频/音频播放器的方法、属性、事件，要理解，记忆视频/音频播放器的方法、属性、事件，其中重点记忆方法、属性、事件的单词拼写，思考什么时候用，怎么用

引用参考

引用参考：字节跳动青训营第四届，Web多媒体入门课程。

avatar
文章
阅读
粉丝