西瓜播放器是干嘛用的，怎么使用西瓜播放器

作者：字节跳动转链接：https://www.yuque.com/docs/share/a86a12a1-77c4-4f78-854b-af185f90bec4

目录：西瓜播放器功能解析（上）《实用版》

西瓜播放器功能详解（下）《实用版》

西瓜视频播放器(HTML5)是一款带有解析器的HTML5视频播放器，可以节省您的流量。从最底层解析MP4、HLS、FLV，探索更大、可控的视频播放空间。它具有以下特点：

易于扩展：灵活的插件系统、PC/手机自动切换、安全白名单机制，更丰富：强大的MP4控制、按需无缝切换、有效节省带宽，更完善：完整的产品机制、错误监控和报告、自动降级处理。背景字节跳动的视频业务大部分是短视频，早期基于video.js进行二次开发。然后我们发现很多功能并不能满足我们的要求，比如UI定制的成本、视频清晰度的无缝切换、视频流量的节省等。考虑到目前点播视频大多是mp4，播放器可以通过加载视频、解析视频、转换格式来动态支持不支持分割播放的mp4，我做了一个大胆的假设：因此，不需要对源视频格式进行转换，服务器端也没有其他开销。带着这样的动力，我们在2017年底完成了这个开发任务，并在2018年初测试了它的稳定性和经济效益。

对此，一次性解析HLS、FLV等视频，只有掌握底层技术才能实现优化，而不是单纯依靠第三方视频库，才能获得可能。为了继续攻克HLS和FLV解析，我们通过交互效果、入口动画等增强了产品体验。最近，我们想完善我们的文档，开源播放器的源码，为更多的视频从业者提供参考，让我们能够交流，共同学习，共同进步，我在想。

1、西瓜播放器架构

1.1 函数分析思维导图

2.西瓜播放器UML

3、分析内置插件特性西瓜视频播放器提倡每一个设计都是插件，从播放按钮到对直播功能的支持。如果您想更好地为您的业务定制播放器，那么了解插件机制非常重要。播放器本身包含很多用于报错、加载、播放等的插件。如果您想自定义效果，只需关闭内置插件并开发自己的插件即可。

3.1 本地预览功能播放器预览本地视频功能，不建议更改。源代码

地址：https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/localPreview.js

用法new Player({ el:document.querySelector('#mse'), url: 'video_url',review: { UploadEl: UploadDom }}); 配置项：uploadEl 含义：用于放置上传相关控件Dom 元素video file let 的源码实现localPreview=function() { let player=this; let util=Player.util; //util.createDom=function (el='p', tpl='', attrs={}, cname='') let Preview=util.createDom( 'xg-preview', '', {}, 'xgplayer-preview' ); 让upload=review.querySelector('input'); if (player.config.preview 播放器.config.preview .uploadEl) { player.config.preview.uploadEl.appendChild(preview); Upload.onchange=function() { //https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input /file //HTMLInputElement.files属性返回值- 返回值是FileList 对象。 //该对象是一个包含许多File 文件的列表player.uploadFile=Upload.files[0]; //objectURL=URL.createObjectURL(object ); //参数object：用于创建URL 、 Blob 对象或媒体源对象。 //URL.revokeObjectURL() 静态方法用于释放通过调用URL.createObjectURL() 创建的先前存在的//URL 对象。 //使用完URL 对象后，应该调用此方法让浏览器//知道它不再需要在内存中保留对文件的引用。例如： window.URL.revokeObjectURL(objectURL); let url=URL.createObjectURL(player.uploadFile); if (util.hasClass(player.root, 'xgplayer-nostart')) { player.config.url=url; } player .start(); } else { player.src=url; player.play(); } }; }};Player.install('localPreview', localPreview); 原理分析视频本地预览功能主要使用URL .createObjectURL () API 来实现。 URL.createObjectURL() 静态方法创建一个DOMString，其中包含表示参数指定的对象的URL。此URL 的生命周期与创建它的窗口中的文档绑定。这个新的URL 对象表示指定的File 或Blob 对象。

注意：此功能适用于Web Workers。

注意：此功能不适用于Service Worker，因为它可能导致内存泄漏。

输入文件获取本地File对象将File对象转换为ObjectURL 将Video元素的src设置为视频本地ObjectURL地址扩展解析1.在前端实现本地图片预览

前端本地图片预览可以通过FileReader.readAsDataURL或URL.createObjectURL实现。

2.FileReader和URL.createObjectURL的比较

2.1 是否同步

createObjectURL 是同步执行的，FileReader.readAsDataURL 是异步执行的。

createObjectURL 方法返回本地URL 地址，该对象将存储在内存中，直到文档触发卸载事件（例如关闭文档）或您手动调用revokeObjectURL。 FileReader.readAsDataURL 返回一个base64 格式的字符串，它比Blob URL 占用更多的内存空间。如果不再需要，可以通过系统的垃圾回收机制自动回收。 2.3 兼容性

createObjectURL：支持IE 10以上主流浏览器。有关详细的兼容性信息，请参阅caniuse-createObjectURL。 FileReader.readAsDataURL：支持IE 10以上主流浏览器。有关详细的兼容性信息，请参阅caniuse - readAsDataURL 参考资源—— filereader-vs-window-url-createobjecturl。

地址：https://stackoverflow.com/questions/31742072/filereader-vs-window-url-createobjecturl/31743665#31743665

3. 发现createObjectURL函数

函数createObjectURL (file) { if (window.webkitURL) {return window.webkitURL.createObjectURL(file); } else if (window.URL window.URL.createObjectURL) {return window.URL.createObjectURL(file); } else { returns null; } }如何在参考资源—— window-url-createobjecturl-和-window-webkiturl-create之间进行选择

地址：https://stackoverflow.com/questions/11277677/how-to-choose- Between-window-url-createobjecturl-and-window-webkiturl-create

4.插件优化项

是否可以提供一个智能回收方案，比如在特定时间调用revokeObjectURL方法，通过源码中的createObjectURL播放器预览大视频，避免占用大量内存。 config.preview.uploadEl.appendChild(preview)只保证对象是否存在，但不保证传递的对象一定是DOM元素。要判断是否是DOM 元素，可以使用以下方法： function isElement(obj) { try { //使用W3 DOM2 (works in FF, Opera, and Chrome) return obj instanceof HTMLElement ; } catch(e){ //不支持DOM2的W3浏览器没有HTMLElement， //抛出异常并结束在这里。 //测试每个元素都具有的一些属性（适用于IE7） return (typeof obj==='object') ( obj.nodeType===1) (typeof obj.style==='object') (typeof obj. ownerDocument==='object'); }}更新2

//如果是DOM则返回true。 nodefunction isNode(o){ return ( typeof Node==='object' o instanceof Node : o typeof o==='object' typeof o.nodeType==='number' typeof o .nodeName===='string' );}//如果是DOM元素则返回true function isElement(o){ return ( typeof HTMLElement==='object' oinstanceof HTMLElement : //DOM2 o typeof o==='object' o !==null o .nodeType===1 typeof o.nodeName==='string' );} 参考资源—— how-do-you-check-if-a-javascript-object-is- -dom object

地址：https://stackoverflow.com/questions/384286/how-do-you-check-if-a-javascript-object-is-a-dom-object

3.2 播放器截图：对播放器内部进行截图。您可以自定义屏幕截图格式。源代码

地址：https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/screenShot.js

截图功能可以让您即时截取当前视频播放窗口的屏幕截图。截图尺寸是当前视频播放窗口的尺寸。屏幕截图默认为.png 格式。

用法new Player({ el:document.querySelector('#mse'), url: 'video_url', screenShot: true}) 设置项：screenShot 默认值：false 参考值：true | false 源码实现let screenShot=function () { let player=this let util=Player.util if (!player.config.screenShot) { return } let btn=util.createDom( 'xg-screenShot', 'Screenshot

', {tabindex: 11}, 'xgplayer-screenShot' ); let Canvas=document.createElement('canvas') let CanvasCtx=Canvas.getContext('2d') let img=new Image() //截图的大小是当前视频播放窗口大小Canvas.width=this.config.width || 600 Canvas.height=this.config.height || 337.5 //为播放器控件添加截图按钮let root=player.controls root. appendChild(btn ) let array=['click', 'touchstart'] array.forEach(item={ btn.addEventListener(item, function (e) { e.preventDefault() e.stopPropagation() img.onload=(function () { //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage //示例：CSSImageValue、HTMLImageElement、SVGImageElement、HTMLVideoElement、 //HTMLCanvasElement、ImageBitmap 或OffscreenCanvas.canvasCtx.drawImage(player) .video, 0 , 0, Canvas.width, Canvas.height) //https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image //https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes //anonymous: 对此元素的CORS 请求不设置凭据标志。 //use-credentials: 对此元素的CORS 请求设置凭据标志。 //设置空值，例如'':crossorigin 或crossorigin=''，与设置anonymous效果相同img.setAttribute('crossOrigin' , 'anonymous') img.src=Canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') let screenShotImg=img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream'); saveScreenShot(screenShotImg, 'screenshot.png') })() } ) })}Player.install('screenShot', screenShot) 原理分析截图功能主要通过CanvasRenderingContext2D.drawImage() API实现。 Canvas 2D API 的CanvasRenderingContext2D.drawImage() 方法提供了多种在Canvas 上绘制图像的方法。 DrawImage API 的语法是：

void ctx.drawImage(图像， dx, dy);

void ctx.drawImage(图像， dx, dy, dWidth, dHeight);

void ctx.drawImage(图像， sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image 参数表示绘制到上下文中的元素。允许画布图像源(CanvasImageSource)，例如CSSImageValue、HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas。

创建一个屏幕截图按钮并将其添加到播放器控制栏。创建一个Canvas 元素和一个Image 实例。为截图按钮绑定事件监听，例如click、touchstart事件。当用户点击截图时，执行相应的回调函数。触发并通过drawImage()获取当前视频帧进阶分析1.Image元素的crossOrigin属性

在HTML5 中，某些HTML 元素提供CORS 支持。例如，音频、图像、链接、脚本和视频都具有跨域属性，允许元素组成CORS 请求来检索数据。

默认情况下（即，如果未指定crossOrigin 属性），根本不使用CORS。正如CORS 规范的术语部分中所解释的，设置“匿名”关键字可防止在非原始情况下通过cookie、客户端SSL 证书或HTTP 身份验证交换用户凭据。无效关键字和空字符串也被视为匿名关键字。

参考资源—— CORS_settings_attributes

地址：https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes

2. HTMLCanvasElement.toDataURL()

HTMLCanvasElement.toDataURL() 方法返回包含图像显示的数据URI。您可以使用type 参数指定类型。默认为PNG 格式。图像分辨率为96dpi。

如果画布高度或宽度为0，则返回字符串“data:”。 '如果传递的类型不是'image/png'但返回值以'data:image/png'开头，则不支持传递的类型。 Chrome 支持“image/webp”类型。 HTMLCanvasElement.toDataURL() 的语法是：

Canvas.toDataURL(type,encoderOptions);type可选，图像格式，默认为image/pngencoderOptions可选。如果指定的图像格式为image/jpeg或image/webp，则可以选择0到1张图像。如果该值超出范围，则使用默认值0.92。其他参数将被忽略。

const canvas=document.getElementById('canvas'); const dataurl=canvas.todataurl(); console.log(dataurl); //'data:image/png; base64, ivborw0kggoaaaanasuheugaaaaaaaaaaafcanby ///blgaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa afltksuqmcc'3，前端文件下载

选项1：

let saveScreenShot=function (data, filename) { let saveLink=document.createElement('a') saveLink.href=data saveLink.download=文件名letevent=document.createEvent('MouseEvents')event.initMouseEvent('click' , true , false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null) saveLink.dispatchEvent(event)} 解决方案2：

const a=document.createElement('a');const url=window.URL.createObjectURL(blob);const filename='what-you-want.txt';a.href=url;a.download=文件名； a .click();window.URL.revokeObjectURL(url);有关DataURL 和createObjectURL 方法之间的差异的信息，请参阅本地预览功能的增强分析部分。

参考资源—— 这一定是我见过的最全面的前端下载概述。

地址：https://zhuanlan.zhihu.com/p/55224397

4. 自定义事件

let event=document.createEvent('MouseEvents')event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)saveLink.dispatchEvent (活动)5.插件优化项

let array=['click', 'touchstart'] 标准化变量命名。我们建议命名数组事件。 saveScreenShot(screenShotImg, '屏幕截图.png'