[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"solution-scenes-menu":3,"tech-detail-2396":4},true,{"id":5,"title":6,"content":7,"picUrl":8,"tagIds":9,"keyWords":10,"htmlDescribe":11,"htmlUrl":12,"gmtCreate":13,"gmtModified":13,"articleInfoId":14},"2396","美畅物联丨JS播放器录像功能：从技术到应用的全面解析","\u003Cp style=\"text-indent:2em;line-height:2\">\u003Cspan style=\"font-size:16px\">畅联云平台的JS播放器是一款功能十分强大的视频汇聚平台播放工具，它已经具备众多实用功能，像实时播放、历史录像回放、云台控制、倍速播放、录像记录、音频播放、画面放大、全屏展示、截图捕捉等等。这些功能构建起了一个高效、灵活且用户友好的播放环境，为各类应用场景提供了有力的支持。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp style=\"text-align:center;line-height:2\">\u003Cimg src=\"https:\u002F\u002Fqu-link.oss-cn-hangzhou.aliyuncs.com\u002F2024\u002F12\u002F13\u002F631f9ab7-9426-44c9-950e-f32966394712.png\" alt=\"\" loading=\"lazy\" \u002F>\u003C\u002Fp>\u003Cp style=\"text-indent:2em;text-align:left;line-height:2\">\u003Cspan style=\"font-size:16px\">在上一期内容中，我们探讨了JS播放器录像功能的操作方法。本期，美畅物联的钱工将为大家深入剖析JS播放器录像功能的实现过程，揭示其背后的技术原理与优化策略。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp style=\"text-align:center;line-height:2\">\u003Cimg src=\"https:\u002F\u002Fqu-link.oss-cn-hangzhou.aliyuncs.com\u002F2024\u002F12\u002F13\u002F71815c29-7db1-4ecc-8bab-9681406de735.png\" alt=\"\" loading=\"lazy\" \u002F>\u003C\u002Fp>\u003Cp style=\"text-indent:2em;text-align:left;line-height:2\">\u003Cspan style=\"font-size:16px\">首先，我们要在播放器里添加一个录像按钮，用来触发播放器的录像事件。当用户点击这个录像按钮时，播放器便开始录像；再次点击该按钮时，播放器则停止录像。因为播放器是原生编写的，所以在创建播放器并生成元素的时候，直接加入添加录像按钮这一内容，如此一来，播放器生成时录像按钮就能直接显示出来了。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp style=\"text-align:center;line-height:2\">\u003Cimg src=\"https:\u002F\u002Fqu-link.oss-cn-hangzhou.aliyuncs.com\u002F2024\u002F12\u002F13\u002F14d4451e-91f9-4220-8939-57cc1311286c.png\" alt=\"\" loading=\"lazy\" \u002F>\u003C\u002Fp>\u003Cp style=\"text-indent:2em;text-align:left;line-height:2\">\u003Cspan style=\"font-size:16px\">接着，我们就能为这个按钮编写触发事件了，即当用户点击该按钮时调用这个事件。播放器事件的触发逻辑如下：我们直接给整个播放器窗口添加了一个点击事件，之后获取点击对象ptzCommand的值，若没有该值则不触发事件，只有当ptzCommand的值为97时，才认定其为录像按钮，此时执行录像事件。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp style=\"text-align:center;line-height:2\">\u003Cimg src=\"https:\u002F\u002Fqu-link.oss-cn-hangzhou.aliyuncs.com\u002F2024\u002F12\u002F13\u002F354f7da9-e8eb-4e66-b0fd-bf3d207cd2b7.png\" alt=\"\" loading=\"lazy\" \u002F>\u003C\u002Fp>\u003Cp style=\"text-indent:2em;text-align:left;line-height:2\">\u003Cspan style=\"font-size:16px\">接下来是录像方法。由于录像按钮被触发时，既可能是开启录像，也可能是停止录像，所以在录像方法启动之际，我们需要判断录像是否正在进行。若尚未进行，则开启录像，使播放窗口高亮显示，同时在播放窗口展示录像读秒；若正在进行，则停止录像，取消播放窗口的高亮显示，并生成MP4文件下载至本地。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp style=\"text-align:center;line-height:2\">\u003Cimg src=\"https:\u002F\u002Fqu-link.oss-cn-hangzhou.aliyuncs.com\u002F2024\u002F12\u002F13\u002F827c339f-149e-4cce-a3d3-e1190b0b556b.png\" alt=\"\" loading=\"lazy\" \u002F>\u003C\u002Fp>\u003Cp style=\"text-indent:2em;text-align:justify;line-height:2\">\u003Cspan style=\"font-size:16px\">录像开始时，首先创建一个定时任务，该任务旨在显示录像读秒，且恰好每隔1秒更新一次读秒，此定时任务也是判断录像是否正在执行的一个依据。开始录像之际，我们借助MediaRecorder这个API来保存播放器画面，并将保存格式设定为MP4。ondataavailable事件会在每次获取到播放数据时触发，我们把获取到的播放数据保存至数组之中。在设置好MediaRecorder对象后便开始录像（start()），其余的代码用于高亮显示播放窗口以及更新读秒。之后，当录像停止时，我们停止（stop()）MediaRecorder这个对象，销毁定时任务，取消播放窗口的高亮显示和读秒，并且执行停止事件，将保存在数组中的数据生成MP4文件并进行下载。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp style=\"text-align:center;line-height:2\">\u003Cimg src=\"https:\u002F\u002Fqu-link.oss-cn-hangzhou.aliyuncs.com\u002F2024\u002F12\u002F13\u002F28008933-adae-4b48-b999-da50ca7b9908.png\" alt=\"\" loading=\"lazy\" \u002F>\u003C\u002Fp>\u003Cp style=\"text-indent:2em;text-align:justify;line-height:2\">\u003Cspan style=\"font-size:16px\">通过对畅联云平台JS播放器录像功能实现过程的深入剖析，我们不仅了解了录像功能背后的技术细节，还看到了其高效性和灵活性的体现。这不仅为用户提供了一个功能强大的播放工具，也为开发者提供了一个可借鉴的技术实现范例。相信在未来的发展中，JS播放器将持续迭代优化，以其卓越的性能和不断丰富的功能，在更多复杂多变的应用场景中大放异彩，为构建更加智能、高效的数字化生态贡献坚实力量。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp style=\"text-align:justify\">————————————————\u003C\u002Fp>\u003Cp style=\"text-align:left;line-height:2\">\u003Cspan style=\"color:rgb(0, 0, 0);background-color:rgb(255, 255, 255);font-size:16px\">关注\u003C\u002Fspan>\u003Cspan style=\"color:rgb(66, 144, 247);background-color:rgb(255, 255, 255);font-size:16px\">\u003Cstrong>“美畅物联”\u003C\u002Fstrong>\u003C\u002Fspan>\u003Cspan style=\"color:rgb(0, 0, 0);background-color:rgb(255, 255, 255);font-size:16px\">，了解更多视频汇聚及AIoT底座解决方案。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp>\u003Cbr \u002F>\u003C\u002Fp>","https:\u002F\u002Fqu-link.oss-cn-hangzhou.aliyuncs.com\u002F2024\u002F12\u002F13\u002F7bdce7e7-f061-46e8-bcf0-30c5128022ad.jpg","9","美畅，美畅物联，畅联，畅联云平台，视频监控云平台，云视频监控，视频云平台，视频开放平台，视频感知云，视频接入网关，AIoT综合接入网关，视频中台，物联网中台，无插件播放，H265播放，Ehome，ISUP， GB28181，GB35114，gat1400，JT808，JT1078","原创技术分享丨美畅物联钱工","http:\u002F\u002Fwww.24hlink.cn\u002Fweb-index\u002FSWVOUIO.html","2024-12-13 17:00:57","804"]