h5 video api,html中的video的用法
1.原生H5 video标签
视频id= MSE 自动播放=线路控制中的真实播放=控制源src=实机视频地址type=video/mp4 你的浏览器不支持录像标签/视频2.第三方插件video.js
_这个。player=videojs(_这个。视频节点，{ autoplay: true，bigPlayButton : false，controls: true，preload: auto ，poster: poster，notSupportedMessage:视频加载失败，请刷新再试试，来源：[ { src: videoUrl，type: video/mp4 ，}，]，}，function onPlayerReady(){ this。play()；})视频ref={(node)=(这个。video node=node)} class name= video-js vjs-big-play-centered preload= auto autoplay= autoplay playsinline= true WebKit-playsinline= true X5-video-player-type= H5 X5-video-player-全屏= false X5-video-orientation= port raint /video2.1 支持原生H5 video标签的所有配置参数，并且更加丰富的配置。
2.2 多环境兼容性
3.业务开发中的场景
目前基本表现良好
3.1 自动播放实现
3.1.1 非微信端
目前主要方法是在视频的onPlayerReady回调中调用玩方法，以及特殊环境下需要用户手动触发
3.1.2 微信端
微信端（特别是ios)为了能够实现自动播放功能，目前主要通过增加微信威信桥梁准备事件回调的方式来触发
文档。addevent侦听器( weixinsbridgeready ，函数(){ this。玩家。play()；},假);4.播放过程
一次播放三次请求
请求头信息
响应信息
范围：字节=0-首部信息，该信息用于检测服务端是否支持范围请求
接受范围首部（并且它的值不为"无"),那么表示该服务器支持范围请求
内容长度也是有效信息，因为它提供了要下载的视频的完整大小
含量范围响应首部则表示这一部分内容在整个资源中所处的位置
范围-可以分片段请求，此时的含量范围则返回的对应请求区间的大小
5.其他场景
5.1 如何实现视频本地预览
视频本地预览的功能主要利用URL.createObjectURL()方法来实现URL.createObjectURL()静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象的网址。这个统一资源定位器的生命周期和创建它的窗口中的文件绑定。这个新的统一资源定位器对象表示指定的文件对象或一滴对象。
！DOCTYPE html html head meta charset= UTF-8 /meta name= viewport content= width=设备宽度，初始比例=1.0 /标题视频本地预览示例/title/head body输入type= file accept= video/* onchange= loadFile(event)/video id= preview container 控件width= 480 height= 270 style= display:none；/视频脚本const loadFile=function(event){ const reader=new file reader()；读者。onload=function(){常量输出=文档。查询选择器(#预览容器))；输出。风格。display= block输出。src=URL。createobjecturl(新的Blob([reader。结果])；};读者。readasarraybuffer(事件。目标。文件[0])；};/脚本/正文/html5.2 如何实现播放器截图
播放器截图功能主要利用canvasrenderingcontext 2d。绘制图像()API来实现画布2D API中的canvasrenderingcontext 2d。绘制图像()方法提供了多种方式在帆布上绘制图像。
drawImage API的语法如下：
void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);DOCTYPE htmlhtml lang=en head meta charset=UTF-8/ meta name=viewport content=width=device-width, initial-scale=1.0/ title播放器截图示例/title /head body video id=video controls=controls width=460 height=270 crossorigin=anonymous !-- 请替换为实际视频地址-- source src=请替换为实际视频地址/ /video button onclick=captureVideo()截图/button script let video=document.querySelector(#video); let canvas=document.createElement(canvas); let img=document.createElement(img); img.crossOrigin=; let ctx=canvas.getContext(2d); function captureVideo() { canvas.width=video.videoWidth; canvas.height=video.videoHeight; ctx.drawImage(video, 0, 0, canvas.width, canvas.height); img.src=canvas.toDataURL(); document.body.append(img); } /script /body/html5.3 如何实现 Canvas 播放视频
使用Canvas 播放视频主要是利用ctx.drawImage(video, x, y, width, height) 来对视频当前帧的图像进行绘制，其中video 参数就是页面中的video 对象。所以如果我们按照特定的频率不断获取video 当前画面，并渲染到Canvas 画布上，就可以实现使用Canvas 播放视频的功能。
!DOCTYPE htmlhtml head meta charset=UTF-8/ meta name=viewport content=width=device-width, initial-scale=1.0/ title使用Canvas 播放视频/title /head body video id=video controls=controls style=display: none; !-- 请替换为实际视频地址-- source src=请替换为实际视频地址/ /video canvas id=myCanvas width=460 height=270 style=border: 1px solid blue; /canvas div button id=playBtn播放/button button id=pauseBtn暂停/button /div script const video=document.querySelector(#video); const canvas=document.querySelector(#myCanvas); const playBtn=document.querySelector(#playBtn); const pauseBtn=document.querySelector(#pauseBtn); const context=canvas.getContext(2d); let timerId=null; function draw() { if (video.paused video.ended) return; context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(video, 0, 0, canvas.width, canvas.height); timerId=setTimeout(draw, 0); } playBtn.addEventListener(click, ()={ if (!video.paused) return; video.play(); draw(); }); pauseBtn.addEventListener(click, ()={ if (video.paused) return; video.pause(); clearTimeout(timerId); }); /script /body/html以上就是前端H5 Video常见使用场景简介的详细内容，更多关于前端H5 Video常见场景的资料请关注其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。