界面效果
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
