界面效果
HTML结构
<div class="homePopup" ><div class="search_box animate__animated animate__fadeInDown" style="display: none;"><div class="van-search" style="background: rgba(0, 0, 0, 0);"><!----><div class="van-search__content van-search__content--square"><!----><div class="van-cell van-cell--borderless van-field van-search__field"><div class="van-field__left-icon"><i class="van-badge__wrapper van-icon van-icon-search"><!----><!----><!----></i></div><!----><div class="van-cell__value van-cell__value--alone van-field__value"><div class="van-field__body"><input type="search" id="van-search-1-input" class="van-field__control"placeholder="请输入搜索关键词"><!----><!----><!----></div><!----><!----></div><!----><!----></div></div><!----></div><!----></div><div class="selector animate__animated animate__fadeInLeft" style="display: none;"><div class="darkChoices" ><div >快速选择</div><div ><div class="darkChoices_item" style="display: none;"><div class="transition_tite" >全省路线</div><div class="transition-box" >按路线查看</div><div class="transition-box" >按城市查看</div></div><!----><div class="search_info infoList2" style="display: none;"><div class="infoList_item" ><div >成都</div></div><div class="infoList_item" ><div >自贡</div></div><div class="infoList_item" ><div >攀枝花</div></div><div class="infoList_item" ><div >泸州</div></div><div class="infoList_item" ><div >德阳</div></div><div class="infoList_item" ><div >绵阳</div></div><div class="infoList_item" ><div >广元</div></div><div class="infoList_item" ><div >遂宁</div></div><div class="infoList_item" ><div >内江</div></div><div class="infoList_item" ><div >乐山</div></div><div class="infoList_item" ><div >南充</div></div><div class="infoList_item" ><div >眉山</div></div><div class="infoList_item" ><div >宜宾</div></div><div class="infoList_item" ><div >广安</div></div><div class="infoList_item" ><div >达州</div></div><div class="infoList_item" ><div >雅安</div></div><div class="infoList_item" ><div >巴中</div></div><div class="infoList_item" ><div >资阳</div></div><div class="infoList_item" ><div >马尔康</div></div><div class="infoList_item" ><div >康定</div></div><div class="infoList_item" ><div >西昌</div></div></div></div></div></div><div class="detail-box animate__animated animate__fadeInDown" ><div style=""><div class="details" ><img class="details_img" src="https://etc.its-sc.com.cn/SiChuanGSTadmin/img/G4202.png"alt="" ><div class="details_box" ><p class="details_box_name" >G4202成都绕城高速</p><p class="details_box_cameraname" >四川-G4202-成都绕城高速东段-路段K11+650内环门架球机</p></div><img class="detail-video-close" src="static/img/icon-cctv-close.67e2c9ea.svg"></div><div class="videoStrs" ><div style="width: 100%; height: 100%; object-fit: fill;" data-setup="{}" type="video/m3u8" playsinline="true" webkit-playsinline="true"autoplay="true" class="video-js vjs-default-skin vjs-big-play-centered vjs-workinghover vjs-v7 videoElementCopy-dimensions vjs-controls-enabled vjs-has-started vjs-live vjs-playing vjs-user-inactive"id="videoElementCopy" tabindex="-1" role="region" lang="" translate="no"aria-label="Video Player"><video id="videoElementCopy_html5_api" class="vjs-tech" autoplay="" webkit-playsinline="true"playsinline="playsinline" type="video/m3u8" data-setup="{}" style="width: 100%; height: 100%; object-fit: fill;" tabindex="-1" role="application"preload="auto" src="blob:https://etc.its-sc.com.cn/4a1891d9-3586-4b7d-9348-d8513243e93e"><source id="source" type="application/x-mpegURL" src="https://vcsplay.its-sc.com.cn:8196/live/HD_fe4d52ce-e45d-479c-9909-86dc3c1a5a64.m3u8?auth_key=1708570297-0-0-f4e496cf613993c38edbdd0bb88a061d"></video><div class="vjs-poster vjs-hidden" tabindex="-1" aria-disabled="false"></div><div class="vjs-text-track-display" translate="yes" aria-live="off" aria-atomic="true"><div style="position: absolute; inset: 0px; margin: 1.5%;"></div></div><div class="vjs-loading-spinner" dir="ltr"><span class="vjs-control-text">Video Player is loading.</span></div><button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Play Video</span></button><div class="vjs-control-bar" dir="ltr"><button class="vjs-play-control vjs-control vjs-button vjs-playing" type="button"title="Pause" aria-disabled="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Pause</span></button><div class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"><button class="vjs-mute-control vjs-control vjs-button vjs-vol-3" type="button"title="Mute" aria-disabled="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Mute</span></button><div class="vjs-volume-control vjs-control vjs-volume-horizontal"><div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal"role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"aria-label="Volume Level" aria-live="polite" aria-valuetext="100%"><div class="vjs-mouse-display"><div class="vjs-volume-tooltip" aria-hidden="true"></div></div><div class="vjs-volume-level"><span class="vjs-control-text"></span></div></div></div></div><div class="vjs-current-time vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Current Time </span><span class="vjs-current-time-display" aria-live="off" role="presentation">0:42</span></div><div class="vjs-time-control vjs-time-divider" aria-hidden="true"><div><span>/</span></div></div><div class="vjs-duration vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Duration </span><span class="vjs-duration-display" aria-live="off" role="presentation">-:-:-</span></div><div class="vjs-progress-control vjs-control"><div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal"role="slider" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100"aria-label="Progress Bar" aria-valuetext="0:00:43 of -:-:-"><div class="vjs-load-progress" style="width: 0%;"><span class="vjs-control-text"><span>Loaded</span>:<span class="vjs-control-text-loaded-percentage">0.00%</span></span><div data-start="14" data-end="64" style="left: 21.88%; width: 78.13%;"></div></div><div class="vjs-mouse-display"><div class="vjs-time-tooltip" aria-hidden="true"></div></div><div class="vjs-play-progress vjs-slider-bar" aria-hidden="true" style="width: 0%;"><div class="vjs-time-tooltip" aria-hidden="true" style="right: 0px;">0:00:43</div></div></div></div><div class="vjs-live-control vjs-control"><div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type </span>LIVE</div></div><button class="vjs-seek-to-live-control vjs-control" type="button" title="Seek to live, currently behind live"aria-disabled="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Seek to live, currently behind live</span><span class="vjs-seek-to-live-text" aria-hidden="true">LIVE</span></button><div class="vjs-remaining-time vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Remaining Time </span><span aria-hidden="true">-</span><span class="vjs-remaining-time-display" aria-live="off" role="presentation">-:-:-</span></div><div class="vjs-custom-control-spacer vjs-spacer "> </div><div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><div class="vjs-playback-rate-value" id="vjs-playback-rate-value-label-videoElementCopy_component_254">1x</div><button class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button"type="button" aria-disabled="false" title="Playback Rate" aria-haspopup="true"aria-expanded="false" aria-describedby="vjs-playback-rate-value-label-videoElementCopy_component_254"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Playback Rate</span></button><div class="vjs-menu"><ul class="vjs-menu-content"></ul></div></div><div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button"type="button" aria-disabled="false" title="Chapters" aria-haspopup="true"aria-expanded="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Chapters</span></button><div class="vjs-menu"><ul class="vjs-menu-content"><li class="vjs-menu-title" tabindex="-1">Chapters</li></ul></div></div><div class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button"type="button" aria-disabled="false" title="Descriptions" aria-haspopup="true"aria-expanded="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Descriptions</span></button><div class="vjs-menu"><ul class="vjs-menu-content"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemradio"aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">descriptions off</span><span class="vjs-control-text" aria-live="polite">, selected</span></li></ul></div></div><div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button"type="button" aria-disabled="false" title="Subtitles" aria-haspopup="true"aria-expanded="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Subtitles</span></button><div class="vjs-menu"><ul class="vjs-menu-content"><li class="vjs-menu-item vjs-texttrack-settings" tabindex="-1" role="menuitem"aria-disabled="false"><span class="vjs-menu-item-text">subtitles settings</span><span class="vjs-control-text" aria-live="polite">, opens subtitles settings dialog</span></li><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemradio"aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">subtitles off</span><span class="vjs-control-text" aria-live="polite">, selected</span></li></ul></div></div><div class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button"type="button" aria-disabled="false" title="Audio Track" aria-haspopup="true"aria-expanded="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Audio Track</span></button><div class="vjs-menu"><ul class="vjs-menu-content"><li class="vjs-menu-item vjs-selected vjs-main-menu-item" tabindex="-1"role="menuitemradio" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">default</span><span class="vjs-control-text" aria-live="polite">, selected</span></li></ul></div></div><button class="vjs-picture-in-picture-control vjs-control vjs-button"type="button" title="Picture-in-Picture" aria-disabled="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Picture-in-Picture</span></button><button class="vjs-fullscreen-control vjs-control vjs-button" type="button"title="Fullscreen" aria-disabled="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Fullscreen</span></button></div><div class="vjs-error-display vjs-modal-dialog vjs-hidden" tabindex="-1"aria-describedby="videoElementCopy_component_472_description" aria-hidden="true"aria-label="Modal Window" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="videoElementCopy_component_472_description">This is a modal window.</p><div class="vjs-modal-dialog-content" role="document">视频播放失败</div></div><div class="vjs-modal-dialog vjs-hidden vjs-text-track-settings" tabindex="-1"aria-describedby="videoElementCopy_component_478_description" aria-hidden="true"aria-label="Caption Settings Dialog" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="videoElementCopy_component_478_description">Beginning of dialog window. Escape will cancel and close the window.</p><div class="vjs-modal-dialog-content" role="document"><div class="vjs-track-settings-colors"><fieldset class="vjs-fg-color vjs-track-setting"><legend id="captions-text-legend-videoElementCopy_component_478">Text</legend><label id="captions-foreground-color-videoElementCopy_component_478" class="vjs-label">Color</label><select aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478"><option id="captions-foreground-color-videoElementCopy_component_478-White"value="#FFF" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-White">White</option><option id="captions-foreground-color-videoElementCopy_component_478-Black"value="#000" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-Black">Black</option><option id="captions-foreground-color-videoElementCopy_component_478-Red"value="#F00" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-Red">Red</option><option id="captions-foreground-color-videoElementCopy_component_478-Green"value="#0F0" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-Green">Green</option><option id="captions-foreground-color-videoElementCopy_component_478-Blue"value="#00F" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-Blue">Blue</option><option id="captions-foreground-color-videoElementCopy_component_478-Yellow"value="#FF0" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-Yellow">Yellow</option><option id="captions-foreground-color-videoElementCopy_component_478-Magenta"value="#F0F" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-Magenta">Magenta</option><option id="captions-foreground-color-videoElementCopy_component_478-Cyan"value="#0FF" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478 captions-foreground-color-videoElementCopy_component_478-Cyan">Cyan</option></select><span class="vjs-text-opacity vjs-opacity"><label id="captions-foreground-opacity-videoElementCopy_component_478"class="vjs-label">Transparency</label><select aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-opacity-videoElementCopy_component_478"><option id="captions-foreground-opacity-videoElementCopy_component_478-Opaque"value="1" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-opacity-videoElementCopy_component_478 captions-foreground-opacity-videoElementCopy_component_478-Opaque">Opaque</option><option id="captions-foreground-opacity-videoElementCopy_component_478-SemiTransparent"value="0.5" aria-labelledby="captions-text-legend-videoElementCopy_component_478 captions-foreground-opacity-videoElementCopy_component_478 captions-foreground-opacity-videoElementCopy_component_478-SemiTransparent">Semi-Transparent</option></select></span></fieldset><fieldset class="vjs-bg-color vjs-track-setting"><legend id="captions-background-videoElementCopy_component_478">Background</legend><label id="captions-background-color-videoElementCopy_component_478" class="vjs-label">Color</label><select aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478"><option id="captions-background-color-videoElementCopy_component_478-Black"value="#000" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-Black">Black</option><option id="captions-background-color-videoElementCopy_component_478-White"value="#FFF" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-White">White</option><option id="captions-background-color-videoElementCopy_component_478-Red"value="#F00" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-Red">Red</option><option id="captions-background-color-videoElementCopy_component_478-Green"value="#0F0" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-Green">Green</option><option id="captions-background-color-videoElementCopy_component_478-Blue"value="#00F" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-Blue">Blue</option><option id="captions-background-color-videoElementCopy_component_478-Yellow"value="#FF0" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-Yellow">Yellow</option><option id="captions-background-color-videoElementCopy_component_478-Magenta"value="#F0F" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-Magenta">Magenta</option><option id="captions-background-color-videoElementCopy_component_478-Cyan"value="#0FF" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478 captions-background-color-videoElementCopy_component_478-Cyan">Cyan</option></select><span class="vjs-bg-opacity vjs-opacity"><label id="captions-background-opacity-videoElementCopy_component_478"class="vjs-label">Transparency</label><select aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-opacity-videoElementCopy_component_478"><option id="captions-background-opacity-videoElementCopy_component_478-Opaque"value="1" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-opacity-videoElementCopy_component_478 captions-background-opacity-videoElementCopy_component_478-Opaque">Opaque</option><option id="captions-background-opacity-videoElementCopy_component_478-SemiTransparent"value="0.5" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-opacity-videoElementCopy_component_478 captions-background-opacity-videoElementCopy_component_478-SemiTransparent">Semi-Transparent</option><option id="captions-background-opacity-videoElementCopy_component_478-Transparent"value="0" aria-labelledby="captions-background-videoElementCopy_component_478 captions-background-opacity-videoElementCopy_component_478 captions-background-opacity-videoElementCopy_component_478-Transparent">Transparent</option></select></span></fieldset><fieldset class="vjs-window-color vjs-track-setting"><legend id="captions-window-videoElementCopy_component_478">Window</legend><label id="captions-window-color-videoElementCopy_component_478" class="vjs-label">Color</label><select aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478"><option id="captions-window-color-videoElementCopy_component_478-Black"value="#000" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-Black">Black</option><option id="captions-window-color-videoElementCopy_component_478-White"value="#FFF" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-White">White</option><option id="captions-window-color-videoElementCopy_component_478-Red"value="#F00" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-Red">Red</option><option id="captions-window-color-videoElementCopy_component_478-Green"value="#0F0" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-Green">Green</option><option id="captions-window-color-videoElementCopy_component_478-Blue"value="#00F" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-Blue">Blue</option><option id="captions-window-color-videoElementCopy_component_478-Yellow"value="#FF0" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-Yellow">Yellow</option><option id="captions-window-color-videoElementCopy_component_478-Magenta"value="#F0F" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-Magenta">Magenta</option><option id="captions-window-color-videoElementCopy_component_478-Cyan"value="#0FF" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478 captions-window-color-videoElementCopy_component_478-Cyan">Cyan</option></select><span class="vjs-window-opacity vjs-opacity"><label id="captions-window-opacity-videoElementCopy_component_478" class="vjs-label">Transparency</label><select aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-opacity-videoElementCopy_component_478"><option id="captions-window-opacity-videoElementCopy_component_478-Transparent"value="0" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-opacity-videoElementCopy_component_478 captions-window-opacity-videoElementCopy_component_478-Transparent">Transparent</option><option id="captions-window-opacity-videoElementCopy_component_478-SemiTransparent"value="0.5" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-opacity-videoElementCopy_component_478 captions-window-opacity-videoElementCopy_component_478-SemiTransparent">Semi-Transparent</option><option id="captions-window-opacity-videoElementCopy_component_478-Opaque"value="1" aria-labelledby="captions-window-videoElementCopy_component_478 captions-window-opacity-videoElementCopy_component_478 captions-window-opacity-videoElementCopy_component_478-Opaque">Opaque</option></select></span></fieldset></div><div class="vjs-track-settings-font"><fieldset class="vjs-font-percent vjs-track-setting"><legend id="captions-font-size-videoElementCopy_component_478" class="">Font Size</legend><select aria-labelledby="captions-font-size-videoElementCopy_component_478"><option id="captions-font-size-videoElementCopy_component_478-50" value="0.50"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-50">50%</option><option id="captions-font-size-videoElementCopy_component_478-75" value="0.75"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-75">75%</option><option id="captions-font-size-videoElementCopy_component_478-100" value="1.00"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-100">100%</option><option id="captions-font-size-videoElementCopy_component_478-125" value="1.25"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-125">125%</option><option id="captions-font-size-videoElementCopy_component_478-150" value="1.50"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-150">150%</option><option id="captions-font-size-videoElementCopy_component_478-175" value="1.75"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-175">175%</option><option id="captions-font-size-videoElementCopy_component_478-200" value="2.00"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-200">200%</option><option id="captions-font-size-videoElementCopy_component_478-300" value="3.00"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-300">300%</option><option id="captions-font-size-videoElementCopy_component_478-400" value="4.00"aria-labelledby="captions-font-size-videoElementCopy_component_478 captions-font-size-videoElementCopy_component_478-400">400%</option></select></fieldset><fieldset class="vjs-edge-style vjs-track-setting"><legend id="videoElementCopy_component_478" class="">Text Edge Style</legend><select aria-labelledby="videoElementCopy_component_478"><option id="videoElementCopy_component_478-None" value="none" aria-labelledby="videoElementCopy_component_478 videoElementCopy_component_478-None">None</option><option id="videoElementCopy_component_478-Raised" value="raised" aria-labelledby="videoElementCopy_component_478 videoElementCopy_component_478-Raised">Raised</option><option id="videoElementCopy_component_478-Depressed" value="depressed"aria-labelledby="videoElementCopy_component_478 videoElementCopy_component_478-Depressed">Depressed</option><option id="videoElementCopy_component_478-Uniform" value="uniform" aria-labelledby="videoElementCopy_component_478 videoElementCopy_component_478-Uniform">Uniform</option><option id="videoElementCopy_component_478-Dropshadow" value="dropshadow"aria-labelledby="videoElementCopy_component_478 videoElementCopy_component_478-Dropshadow">Dropshadow</option></select></fieldset><fieldset class="vjs-font-family vjs-track-setting"><legend id="captions-font-family-videoElementCopy_component_478" class="">Font Family</legend><select aria-labelledby="captions-font-family-videoElementCopy_component_478"><option id="captions-font-family-videoElementCopy_component_478-ProportionalSansSerif"value="proportionalSansSerif" aria-labelledby="captions-font-family-videoElementCopy_component_478 captions-font-family-videoElementCopy_component_478-ProportionalSansSerif">Proportional Sans-Serif</option><option id="captions-font-family-videoElementCopy_component_478-MonospaceSansSerif"value="monospaceSansSerif" aria-labelledby="captions-font-family-videoElementCopy_component_478 captions-font-family-videoElementCopy_component_478-MonospaceSansSerif">Monospace Sans-Serif</option><option id="captions-font-family-videoElementCopy_component_478-ProportionalSerif"value="proportionalSerif" aria-labelledby="captions-font-family-videoElementCopy_component_478 captions-font-family-videoElementCopy_component_478-ProportionalSerif">Proportional Serif</option><option id="captions-font-family-videoElementCopy_component_478-MonospaceSerif"value="monospaceSerif" aria-labelledby="captions-font-family-videoElementCopy_component_478 captions-font-family-videoElementCopy_component_478-MonospaceSerif">Monospace Serif</option><option id="captions-font-family-videoElementCopy_component_478-Casual"value="casual" aria-labelledby="captions-font-family-videoElementCopy_component_478 captions-font-family-videoElementCopy_component_478-Casual">Casual</option><option id="captions-font-family-videoElementCopy_component_478-Script"value="script" aria-labelledby="captions-font-family-videoElementCopy_component_478 captions-font-family-videoElementCopy_component_478-Script">Script</option><option id="captions-font-family-videoElementCopy_component_478-SmallCaps"value="small-caps" aria-labelledby="captions-font-family-videoElementCopy_component_478 captions-font-family-videoElementCopy_component_478-SmallCaps">Small Caps</option></select></fieldset></div><div class="vjs-track-settings-controls"><button type="button" class="vjs-default-button" title="restore all settings to the default values">Reset<span class="vjs-control-text">restore all settings to the default values</span></button><button type="button" class="vjs-done-button">Done</button></div></div><button class="vjs-close-button vjs-control vjs-button" type="button"title="Close Modal Dialog" aria-disabled="false"><span class="vjs-icon-placeholder" aria-hidden="true"></span><span class="vjs-control-text" aria-live="polite">Close Modal Dialog</span></button><p class="vjs-control-text">End of dialog window.</p></div></div></div><div class="food" ><div class="onViewBy" ><span >显示视频列表</span></div><div class="switchs" ><div role="switch" class="van-switch van-switch--on" tabindex="0" aria-checked="true"style="font-size: 0.65rem;"><div class="van-switch__node"><!----></div></div><div class="switch_on" ><div class="hdmi" style="">高清</div><div class="flv" style="display: none;">标清</div></div></div></div></div></div><!----><!----><!----><!----><!---->
</div>
视频服务请求
Request URL:
https://vcsplay.its-sc.com.cn/api/video.GetCameraPlayURL?cameraNum=6a1906a5-b550-44fd-b0fa-afa2e7077c6d&videoType=0
Request:
-
cameraNum:6a1906a5-b550-44fd-b0fa-afa2e7077c6d
-
videoType:0
Request Method:GET
Status Code:200 OK
Response:
{
"code": 200,
"msg": "OK",
"url": "https://vcsplay.its-sc.com.cn:8182/live/6a1906a5-b550-44fd-b0fa-afa2e7077c6d.m3u8?auth_key=1708570164-0-0-f1763ed2c66ea60f6c14427b52dae381"
}
Video.js - HTML5 Video Player
Version 3.2.0
<video id="videoElementCopy_html5_api" class="vjs-tech" autoplay="" webkit-playsinline="true"playsinline="playsinline" type="video/m3u8" data-setup="{}" style="width: 100%; height: 100%; object-fit: fill;"tabindex="-1" role="application" preload="auto" src="blob:https://etc.its-sc.com.cn/4a1891d9-3586-4b7d-9348-d8513243e93e"><source id="source" type="application/x-mpegURL" src="https://vcsplay.its-sc.com.cn:8182/live/6a1906a5-b550-44fd-b0fa-afa2e7077c6d.m3u8?auth_key=1708570164-0-0-f1763ed2c66ea60f6c14427b52dae381">
</video>Request URL:
https://vcsplay.its-sc.com.cn:8196/live/HD_fe4d52ce-e45d-479c-9909-86dc3c1a5a64.m3u8?auth_key=1708570297-0-0-f4e496cf613993c38edbdd0bb88a061d
Request Method:GET
Status Code:200 OK
Remote Address:47.108.232.133:8196
Response:
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:3514
#EXT-X-TARGETDURATION:5
#EXT-X-DISCONTINUITY
#EXTINF:3.960, no desc
HD_fe4d52ce-e45d-479c-9909-86dc3c1a5a64-3514.ts
#EXT-X-DISCONTINUITY
#EXTINF:3.960, no desc
HD_fe4d52ce-e45d-479c-9909-86dc3c1a5a64-3515.ts
#EXT-X-DISCONTINUITY
#EXTINF:3.960, no desc
HD_fe4d52ce-e45d-479c-9909-86dc3c1a5a64-3516.ts
https://vcsplay.its-sc.com.cn:8196/live/HD_fe4d52ce-e45d-479c-9909-86dc3c1a5a64-3399.ts
参见：
Video.js - Make your player yours | Video.js
https://vjs.zencdn.net/c/video.js
Video.js API docs
![[服务器-数据库]MongoDBv7.0.4不支持ipv6访问](https://img-blog.csdnimg.cn/img_convert/e7b858f50b1b1f328b3ad9c5b2e872b3.png)
![[ 2024春节 Flink打卡 ] -- Paimon](https://img-blog.csdnimg.cn/direct/3c84841d55964805bf010c22ea80b83e.png)
