Video详解

最新推荐文章于 2024-06-12 15:33:32 发布

汪喆_Jack

最新推荐文章于 2024-06-12 15:33:32 发布

阅读量3.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：直播相关文章标签： video

本文链接：https://blog.youkuaiyun.com/qq_34829447/article/details/83963407

直播相关专栏收录该内容

5 篇文章

订阅专栏

一.Video相关属性和方法

贴图poster
循环播放loop
播放地址设置
控制条controls
预加载preload
静音muted
自动播放autoplay
音量volume
播放时间设置

二.框架搭建

1.使用Web Server浏览器插件

使用Web Server For Chrome浏览器插件(chrom插件)可以保证通过http访问html文件
在插件中选择打开的folder，并选择下方的地址直接打开即可（通过http访问）

2.video框架搭建及基础语法

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video 详解</title>
</head>
<body>
    <!-- 基础用法 -->
    <video src="./test.mp4" width="400" height="225" controls controlslist="nodownload nofullscreen"></video>
</body>
</html>

src属性用来控制源地址
width和height设置宽高
controls设置页面显示选项按键
controlslist用来解决相关选项按键隐藏功能如（nodownload不显示下载，nofullscreen不显示全屏）

三.video详解

1.video标签属性

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video 详解</title>
</head>
<body>
    <!-- 基础用法 -->
    <video src="./test.mp4" width="400" height="225" controls controlslist="nodownload nofullscreen"></video>
    <!-- video贴图 -->
    <video src="./test.mp4" width="400" height="225" controls poster="./poster.JPG"></video>
    <!-- video自动播放 -->
    <video src="./test.mp4" width="400" height="225" autoplay muted controls poster="./poster.JPG"></video>
    <!-- 静音 -->
    <video src="./test.mp4" width="400" height="225" muted controls poster="./poster.JPG"></video>
    <!-- 循环播放 -->
    <video src="./test.mp4" width="400" height="225" muted loop controls poster="./poster.JPG"></video>
    <!-- 预加载 -->
    <video src="./test.mp4" width="400" height="225" preload controls poster="./poster.JPG"></video>
    <!-- 音量控制 -->
    <video src="./test.mp4" id="_volume" width="400" height="225" controls poster="./poster.JPG"></video>
    <script>
        let v = document.getElementById('_volume');
        v.volume = 0.5;
    </script>
    <!-- 播放时间控制 -->
    <video src="./test.mp4" id="_time" width="400" height="225" controls poster="./poster.JPG"></video>
    <script>
        let time = document.getElementById('_time');
        time.currentTime = 60;//单位：秒
    </script>
    <!-- 清晰度切换：其实就是切换视频地址 -->
    <video src="./test.mp4" id="_src" width="400" height="225" controls poster="./poster.JPG"></video>
    <script>
        let src = document.getElementById('_src');
        console.log(src.src)//输出的是绝对地址：http://127.0.0.1:8887/test.mp4
        setTimeout(()=>{
            src.src = './test2.mp4'//赋值的时候赋的是相对地址
        },5000);
    </script>
    <!-- 备用地址切换 -->
    <video width="400" height="225" controls poster="./poster.JPG">
        <source src="./test3.mp4" type="video/mp4"><!-- 错误资源 -->
        <source src="./test2.mp4" type="video/mp4">
    </video>
    <script>
        let source = document.getElementById('_source');
        setTimeout(()=>{
            console.log(source.currentSrc)//http://127.0.0.1:8887/test2.mp4
        },1000);
    </script>
</body>
</html>

video贴图
- 使用poster属性设定贴图图片
- 没有poster则会显示视频第一帧
- 有poster则会显示poster设定的图片
video自动播放
- 使用autoplay设定页面打开后自动播放
- 注意：18年chrome已经不支持autoplay，原因是为了提高用户体验，防止一进入网页就会自动播放过大的音频，故需要加muted实现静音自动播放。
video静音
- 使用muted属性设定页面打开后默认静音
video循环播放
- 使用loop属性设定视频播放结束后循环播放
video预加载
- 使用preload属性设定video预加载
音量控制
- 虽然video标签有volume属性，但该属性直接赋值无效，需要使用js动态添加volume值才可以生效
播放时间控制
- 使用js设定标签的currentTime属性值决定当前视频的时间点
清晰度切换
- 清晰度切换其实就是切换视频地址，即src
- 输出src属性是绝对地址
- 赋值src属性可以是相对地址
备份地址切换
- video可以使用src设置视频地址，也可以使用source子标签中添加src指定视频地址（此时video标签中的src去掉）
- source设置视频地址的好处在于，如果上方的source源出现问题，则会使用下方的source源地址资源（从上到下优先播放原则）
- 通常我们将同一个视频部署到两个域下，当其中一个域地址的视频出现问题时，则会播放另一个域地址的视频
- 使用source时，需要通过video的currentSrc值得到对应播放的资源地址（即内部正在使用的source的src值），并通过排除法查看当前播放的地址与上方没有播放的地址进行对比，即可以得到哪些资源出现问题，并进行排查

2.video事件

video事件
- 视频查找loadstart
- 时长变化durationchange
- 元数据加载loadedmetadata
- 视频下载监听progress
- 可播放监听canplay
- 可流畅播放监听canplaythrough
- 播放监听play
- 暂停监听pause
- 查找开始seeking
- 查找结束seeked
- 视频加载等待waiting
- 视频结束ended

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频事件</title>
</head>
<body>
    <!-- video事件 -->
    <video src="./test.mp4" id="vs" width="400" height="225" controls></video>
    <script>
        let vs = document.getElementById('vs');
        console.log('durationchange',vs.duration);//视频创建初期是没有值的，NAN
        //loadstart
        vs.addEventListener('loadstart',(e)=>{
            console.log('laodstart'); //视频开始加载的时候会出发loadstart事件
        });
        //durationchange
        vs.addEventListener('durationchange',(e)=>{
            console.log('durationchange',vs.duration);//当加载完视频资源后，会触发durationchange事件得到视频的时长
            //durationchange不一定会触发一次，有时会触发多次
            //blob等类型的文件不会一次性加载完，则拿不到全部的总时长，会部分加载，也会得到部分的总时长
        });
        //loadedmetadata
        vs.addEventListener('loadedmetadata',(e)=>{
            console.log('loadedmetadata');//视频元数据加载完成时调用
        });
        //当前的帧数据已经加载，但是没有足够的数据播放帧的下一帧时，会触发loadeddata事件
        //loadeddata
        vs.addEventListener('loadeddata',(e)=>{
            console.log('loadedmetadata');
        });
        //如何知道当前正在下载资源数据
        //progress
        vs.addEventListener('progress',(e)=>{
            console.log('progress');//视频正在下载资源时触发
        });
        //canplay表示当前可播放事件
        vs.addEventListener('canplay',(e)=>{
            console.log('canplay');//当当前有帧去播放时，会触发canplay事件
        });
        //canplaythrough
        vs.addEventListener('canplaythrough',(e)=>{
            console.log('canplaythrough');//当当前可以流畅播放时，会触发canplaythrough
        });
        //当监听到canplay或canplaythrough时才可以播放
        //play播放
        vs.addEventListener('play',(e)=>{
            console.log('play');//当点击播放或使用js点击播放时，会触发play事件
        });
        //pause暂停
        vs.addEventListener('pause',(e)=>{
            console.log('pause');//当点击暂停或使用js调用暂停时，会触发pause事件
        });
        //seeking查找开始事件（比如直接滑动到指定的时间点时开始查找）
        vs.addEventListener('seeking',(e)=>{
            console.log('seeking');
        });
        //seeked本次查找结束事件
        vs.addEventListener('seeked',(e)=>{
            console.log('seeked');
        });
        //waiting在seeking开始到seeked之间被调用
        vs.addEventListener('waiting',(e)=>{
            console.log('waiting');
        });
        //playing点击打开视频的事件
        vs.addEventListener('playing',(e)=>{
            console.log('playing');
        });
        //time update视频进度条进行变化的时候调用
        vs.addEventListener('timeupdate',(e)=>{
            console.log('timeupdate');
        });
        //ended视频结束的时候调用
        vs.addEventListener('ended',(e)=>{
            console.log('ended');
        });
        //error视频错误的时候调用
        vs.addEventListener('error',(e)=>{
            console.log('error',e);
        });
    </script>
</body>
</html>