在Css中，可以拆分，对于我们使用悬停的光标，当触摸时，光标处于活动状态？
let t = document.querySelector('.rd'),
m = t.querySelector('div'),
w = m.clientWidth/2;
t.onpointermove = e => {
m.style.left = (x = Math.min(Math.max(e.offsetX, w), t.clientWidth - w))/t.clientWidth * 100+'%';
console.log(m.style.left);
}.rd {
position: relative;
margin:30px;
background: red;
width: 300px;
height: 10px;
}
.rd div {
background: blue;
height: 250%;
position: absolute;
opacity: .3;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
aspect-ratio: 1 / 1;
}<div class='rd'>
<div></div>
</div>在示例中，我们得到一个百分比；蓝色方块没有超出滑块的边界。好的...考虑到移动限制，如何在控制台中获取从 0 到 100% 的值？
关于 Inkscape 软件、创建和编辑 svg 文件的问题
假设有两个圆圈，一大一小。或者一个大圆圈和文字。大圆圈并不位于画布的中心。
我将小圆圈（对象或文本）转移到大圆圈。
如何将它相对于一个大圆，即相对于另一个对象对齐。将小圆圈放在大圆圈的中心？
第二个问题，我有一个 svg 文件。它包含两个对象（补丁）。我可以为每个对象设置不同的颜色......
我可以将轮廓合并在一起，输出将是一个补丁。
当输出为一个（补丁）时，它包含 2 个组合对象，假设一个在另一个之上。是否可以设置，如果不在 html 中，则在 Inkscape 中设置。为每个设置不同的颜色，前提是画布是透明的？
如果我没记错的话，将一个物体切割成一个物体是可能的，这被称为差异。然后顶部的轮廓将是透明的，因为画布也是透明的。情况不会是这样...
for (let key in obj)
document.createElement(Type)
假设循环永远运行。创建元素，用户的内存会被堵塞吗？
例如，即浏览器资源？当创建相同的元素时...
let tt;
for (let key in obj)
tt = document.createElement(Type)
所以，假设我们每次都覆盖该变量。同时，我们也创建相同的元素......
const toggle = document.querySelector("button.toggle"),
box = document.querySelector(".box");
toggle.addEventListener("click", () => {
box.classList.add("show");
}) .box {height: 100px; margin: 0 auto; width: 80%;}
.item{
background: orange;
height: 100%;
animation: fade-out 0.5s forwards;
display: none;
width: 0px;
margin-left:0px
}
.show .item { display: block;}
@keyframes fade-out {
0% {
margin-left:100px
}
100% {
width: 100px;
display: block;
}
<button class="toggle">Click</button>
<div class="box">
<div class="item"></div>
</div>如何先进行偏移，然后增加元素的宽度。这样宽度就向右增加，而不是向左增加......
第二个问题。我们通过向父母添加一个类来制作动画。现在我们如何在删除类时创建相反的动画？
在js中，我们只是添加一个类，或者删除同一个类。所有的动画都是用 CSS 编写的......
我不擅长处理视频文件，我想听听以其他方式指定的参数，而不是在坞站中。
-b:v:2 800k -maxrate:2 856k -bufsize:2 1200k
-b:v:2 800k // 指定视频比特率，即使输入文件较低，它也会固定。也就是说，如果输入文件为 10MB，比特率为 450k，则输出文件为 20M，比特率为 800k。正确的？
-maxrate:2 856k // 这些速率是什么，它们的用途是什么？它与第一个相同，还是仍然限制并且不严格导致850k？
-bufsize:2 1200k //根本不清楚这个视频的用途和原因？
Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709, progressive), 640x360 [SAR 1:1 DAR 16:9], 3 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
我想知道该行中的以下参数表示什么：
- 3kb/秒
- 30 吨
- 15360 吨
- 60 待定（默认）
在js中我这样写
import MediaPlayerEvents from '/MediaPlayerEvents.js';
脚本内容
/**
* The copyright in this software is being made available under the BSD License,
* included below. This software may be subject to other third party and contributor
* rights, including patent rights, and no such rights are granted under this license.
*
* Copyright (c) 2013, Dash Industry Forum.
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
* * Redistributions of source code must retain the above copyright notice, this
* list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation and/or
* other materials provided with the distribution.
* * Neither the name of Dash Industry Forum nor the names of its
* contributors may be used to endorse or promote products derived from this software
* without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS AS IS AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
* IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
* INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
* NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
import EventsBase from '../core/events/EventsBase.js';
/**
* @class
* @implements EventsBase
*/
class MediaPlayerEvents extends EventsBase {
/**
* @description Public facing external events to be used when developing a player that implements dash.js.
*/
constructor() {
super();
/**
* Triggered when playback will not start yet
* as the MPD's availabilityStartTime is in the future.
* Check delay property in payload to determine time before playback will start.
* @event MediaPlayerEvents#AST_IN_FUTURE
*/
this.AST_IN_FUTURE = 'astInFuture';
/**
* Triggered when the BaseURLs have been updated.
* @event MediaPlayerEvents#BASE_URLS_UPDATED
*/
this.BASE_URLS_UPDATED = 'baseUrlsUpdated';
/**
* Triggered when the video element's buffer state changes to stalled.
* Check mediaType in payload to determine type (Video, Audio, FragmentedText).
* @event MediaPlayerEvents#BUFFER_EMPTY
*/
this.BUFFER_EMPTY = 'bufferStalled';
/**
* Triggered when the video element's buffer state changes to loaded.
* Check mediaType in payload to determine type (Video, Audio, FragmentedText).
* @event MediaPlayerEvents#BUFFER_LOADED
*/
this.BUFFER_LOADED = 'bufferLoaded';
/**
* Triggered when the video element's buffer state changes, either stalled or loaded. Check payload for state.
* @event MediaPlayerEvents#BUFFER_LEVEL_STATE_CHANGED
*/
this.BUFFER_LEVEL_STATE_CHANGED = 'bufferStateChanged';
/**
* Triggered when the buffer level of a media type has been updated
* @event MediaPlayerEvents#BUFFER_LEVEL_UPDATED
*/
this.BUFFER_LEVEL_UPDATED = 'bufferLevelUpdated';
/**
* Triggered when a font signalled by a DVB Font Download has been added to the document FontFaceSet interface.
* @event MediaPlayerEvents#DVB_FONT_DOWNLOAD_ADDED
*/
this.DVB_FONT_DOWNLOAD_ADDED = 'dvbFontDownloadAdded';
/**
* Triggered when a font signalled by a DVB Font Download has successfully downloaded and the FontFace can be used.
* @event MediaPlayerEvents#DVB_FONT_DOWNLOAD_COMPLETE
*/
this.DVB_FONT_DOWNLOAD_COMPLETE = 'dvbFontDownloadComplete';
/**
* Triggered when a font signalled by a DVB Font Download could not be successfully downloaded, so the FontFace will not be used.
* @event MediaPlayerEvents#DVB_FONT_DOWNLOAD_FAILED
*/
this.DVB_FONT_DOWNLOAD_FAILED = 'dvbFontDownloadFailed';
/**
* Triggered when a dynamic stream changed to static (transition phase between Live and On-Demand).
* @event MediaPlayerEvents#DYNAMIC_TO_STATIC
*/
this.DYNAMIC_TO_STATIC = 'dynamicToStatic';
/**
* Triggered when there is an error from the element or MSE source buffer.
* @event MediaPlayerEvents#ERROR
*/
this.ERROR = 'error';
/**
* Triggered when a fragment download has completed.
* @event MediaPlayerEvents#FRAGMENT_LOADING_COMPLETED
*/
this.FRAGMENT_LOADING_COMPLETED = 'fragmentLoadingCompleted';
/**
* Triggered when a partial fragment download has completed.
* @event MediaPlayerEvents#FRAGMENT_LOADING_PROGRESS
*/
this.FRAGMENT_LOADING_PROGRESS = 'fragmentLoadingProgress';
/**
* Triggered when a fragment download has started.
* @event MediaPlayerEvents#FRAGMENT_LOADING_STARTED
*/
this.FRAGMENT_LOADING_STARTED = 'fragmentLoadingStarted';
/**
* Triggered when a fragment download is abandoned due to detection of slow download base on the ABR abandon rule..
* @event MediaPlayerEvents#FRAGMENT_LOADING_ABANDONED
*/
this.FRAGMENT_LOADING_ABANDONED = 'fragmentLoadingAbandoned';
/**
* Triggered when {@link module:Debug} logger methods are called.
* @event MediaPlayerEvents#LOG
*/
this.LOG = 'log';
/**
* Triggered when the manifest load is started
* @event MediaPlayerEvents#MANIFEST_LOADING_STARTED
*/
this.MANIFEST_LOADING_STARTED = 'manifestLoadingStarted';
/**
* Triggered when the manifest loading is finished, providing the request object information
* @event MediaPlayerEvents#MANIFEST_LOADING_FINISHED
*/
this.MANIFEST_LOADING_FINISHED = 'manifestLoadingFinished';
/**
* Triggered when the manifest load is complete, providing the payload
* @event MediaPlayerEvents#MANIFEST_LOADED
*/
this.MANIFEST_LOADED = 'manifestLoaded';
/**
* Triggered anytime there is a change to the overall metrics.
* @event MediaPlayerEvents#METRICS_CHANGED
*/
this.METRICS_CHANGED = 'metricsChanged';
/**
* Triggered when an individual metric is added, updated or cleared.
* @event MediaPlayerEvents#METRIC_CHANGED
*/
this.METRIC_CHANGED = 'metricChanged';
/**
* Triggered every time a new metric is added.
* @event MediaPlayerEvents#METRIC_ADDED
*/
this.METRIC_ADDED = 'metricAdded';
/**
* Triggered every time a metric is updated.
* @event MediaPlayerEvents#METRIC_UPDATED
*/
this.METRIC_UPDATED = 'metricUpdated';
/**
* Triggered when a new stream (period) starts.
* @event MediaPlayerEvents#PERIOD_SWITCH_STARTED
*/
this.PERIOD_SWITCH_STARTED = 'periodSwitchStarted';
/**
* Triggered at the stream end of a period.
* @event MediaPlayerEvents#PERIOD_SWITCH_COMPLETED
*/
this.PERIOD_SWITCH_COMPLETED = 'periodSwitchCompleted';
/**
* Triggered when an ABR up /down switch is initiated; either by user in manual mode or auto mode via ABR rules.
* @event MediaPlayerEvents#QUALITY_CHANGE_REQUESTED
*/
this.QUALITY_CHANGE_REQUESTED = 'qualityChangeRequested';
/**
* Triggered when the new ABR quality is being rendered on-screen.
* @event MediaPlayerEvents#QUALITY_CHANGE_RENDERED
*/
this.QUALITY_CHANGE_RENDERED = 'qualityChangeRendered';
/**
* Triggered when the new track is being rendered.
* @event MediaPlayerEvents#TRACK_CHANGE_RENDERED
*/
this.TRACK_CHANGE_RENDERED = 'trackChangeRendered';
/**
* Triggered when a stream (period) is being loaded
* @event MediaPlayerEvents#STREAM_INITIALIZING
*/
this.STREAM_INITIALIZING = 'streamInitializing';
/**
* Triggered when a stream (period) is loaded
* @event MediaPlayerEvents#STREAM_UPDATED
*/
this.STREAM_UPDATED = 'streamUpdated';
/**
* Triggered when a stream (period) is activated
* @event MediaPlayerEvents#STREAM_ACTIVATED
*/
this.STREAM_ACTIVATED = 'streamActivated';
/**
* Triggered when a stream (period) is deactivated
* @event MediaPlayerEvents#STREAM_DEACTIVATED
*/
this.STREAM_DEACTIVATED = 'streamDeactivated';
/**
* Triggered when a stream (period) is activated
* @event MediaPlayerEvents#STREAM_INITIALIZED
*/
this.STREAM_INITIALIZED = 'streamInitialized';
/**
* Triggered when the player has been reset.
* @event MediaPlayerEvents#STREAM_TEARDOWN_COMPLETE
*/
this.STREAM_TEARDOWN_COMPLETE = 'streamTeardownComplete';
/**
* Triggered once all text tracks detected in the MPD are added to the video element.
* @event MediaPlayerEvents#TEXT_TRACKS_ADDED
*/
this.TEXT_TRACKS_ADDED = 'allTextTracksAdded';
/**
* Triggered when a text track is added to the video element's TextTrackList
* @event MediaPlayerEvents#TEXT_TRACK_ADDED
*/
this.TEXT_TRACK_ADDED = 'textTrackAdded';
/**
* Triggered when a text track should be shown
* @event MediaPlayerEvents#CUE_ENTER
*/
this.CUE_ENTER = 'cueEnter'
/**
* Triggered when a text track should be hidden
* @event MediaPlayerEvents#CUE_ENTER
*/
this.CUE_EXIT = 'cueExit'
/**
* Triggered when a throughput measurement based on the last segment request has been stored
* @event MediaPlayerEvents#THROUGHPUT_MEASUREMENT_STORED
*/
this.THROUGHPUT_MEASUREMENT_STORED = 'throughputMeasurementStored';
/**
* Triggered when a ttml chunk is parsed.
* @event MediaPlayerEvents#TTML_PARSED
*/
this.TTML_PARSED = 'ttmlParsed';
/**
* Triggered when a ttml chunk has to be parsed.
* @event MediaPlayerEvents#TTML_TO_PARSE
*/
this.TTML_TO_PARSE = 'ttmlToParse';
/**
* Triggered when a caption is rendered.
* @event MediaPlayerEvents#CAPTION_RENDERED
*/
this.CAPTION_RENDERED = 'captionRendered';
/**
* Triggered when the caption container is resized.
* @event MediaPlayerEvents#CAPTION_CONTAINER_RESIZE
*/
this.CAPTION_CONTAINER_RESIZE = 'captionContainerResize';
/**
* Sent when enough data is available that the media can be played,
* at least for a couple of frames. This corresponds to the
* HAVE_ENOUGH_DATA readyState.
* @event MediaPlayerEvents#CAN_PLAY
*/
this.CAN_PLAY = 'canPlay';
/**
* This corresponds to the CAN_PLAY_THROUGH readyState.
* @event MediaPlayerEvents#CAN_PLAY_THROUGH
*/
this.CAN_PLAY_THROUGH = 'canPlayThrough';
/**
* Sent when playback completes.
* @event MediaPlayerEvents#PLAYBACK_ENDED
*/
this.PLAYBACK_ENDED = 'playbackEnded';
/**
* Sent when an error occurs. The element's error
* attribute contains more information.
* @event MediaPlayerEvents#PLAYBACK_ERROR
*/
this.PLAYBACK_ERROR = 'playbackError';
/**
* This event is fired once the playback has been initialized by MediaPlayer.js.
* After that event methods such as setTextTrack() can be used.
* @event MediaPlayerEvents#PLAYBACK_INITIALIZED
*/
this.PLAYBACK_INITIALIZED = 'playbackInitialized';
/**
* Sent when playback is not allowed (for example if user gesture is needed).
* @event MediaPlayerEvents#PLAYBACK_NOT_ALLOWED
*/
this.PLAYBACK_NOT_ALLOWED = 'playbackNotAllowed';
/**
* The media's metadata has finished loading; all attributes now
* contain as much useful information as they're going to.
* @event MediaPlayerEvents#PLAYBACK_METADATA_LOADED
*/
this.PLAYBACK_METADATA_LOADED = 'playbackMetaDataLoaded';
/**
* The event is fired when the frame at the current playback position of the media has finished loading;
* often the first frame
* @event MediaPlayerEvents#PLAYBACK_LOADED_DATA
*/
this.PLAYBACK_LOADED_DATA = 'playbackLoadedData';
/**
* Sent when playback is paused.
* @event MediaPlayerEvents#PLAYBACK_PAUSED
*/
this.PLAYBACK_PAUSED = 'playbackPaused';
/**
* Sent when the media begins to play (either for the first time, after having been paused,
* or after ending and then restarting).
*
* @event MediaPlayerEvents#PLAYBACK_PLAYING
*/
this.PLAYBACK_PLAYING = 'playbackPlaying';
/**
* Sent periodically to inform interested parties of progress downloading
* the media. Information about the current amount of the media that has
* been downloaded is available in the media element's buffered attribute.
* @event MediaPlayerEvents#PLAYBACK_PROGRESS
*/
this.PLAYBACK_PROGRESS = 'playbackProgress';
/**
* Sent when the playback speed changes.
* @event MediaPlayerEvents#PLAYBACK_RATE_CHANGED
*/
this.PLAYBACK_RATE_CHANGED = 'playbackRateChanged';
/**
* Sent when a seek operation completes.
* @event MediaPlayerEvents#PLAYBACK_SEEKED
*/
this.PLAYBACK_SEEKED = 'playbackSeeked';
/**
* Sent when a seek operation begins.
* @event MediaPlayerEvents#PLAYBACK_SEEKING
*/
this.PLAYBACK_SEEKING = 'playbackSeeking';
/**
* Sent when the video element reports stalled
* @event MediaPlayerEvents#PLAYBACK_STALLED
*/
this.PLAYBACK_STALLED = 'playbackStalled';
/**
* Sent when playback of the media starts after having been paused;
* that is, when playback is resumed after a prior pause event.
*
* @event MediaPlayerEvents#PLAYBACK_STARTED
*/
this.PLAYBACK_STARTED = 'playbackStarted';
/**
* The time indicated by the element's currentTime attribute has changed.
* @event MediaPlayerEvents#PLAYBACK_TIME_UPDATED
*/
this.PLAYBACK_TIME_UPDATED = 'playbackTimeUpdated';
/**
* Sent when the video element reports that the volume has changed
* @event MediaPlayerEvents#PLAYBACK_VOLUME_CHANGED
*/
this.PLAYBACK_VOLUME_CHANGED = 'playbackVolumeChanged';
/**
* Sent when the media playback has stopped because of a temporary lack of data.
*
* @event MediaPlayerEvents#PLAYBACK_WAITING
*/
this.PLAYBACK_WAITING = 'playbackWaiting';
/**
* Manifest validity changed - As a result of an MPD validity expiration event.
* @event MediaPlayerEvents#MANIFEST_VALIDITY_CHANGED
*/
this.MANIFEST_VALIDITY_CHANGED = 'manifestValidityChanged';
/**
* Dash events are triggered at their respective start points on the timeline.
* @event MediaPlayerEvents#EVENT_MODE_ON_START
*/
this.EVENT_MODE_ON_START = 'eventModeOnStart';
/**
* Dash events are triggered as soon as they were parsed.
* @event MediaPlayerEvents#EVENT_MODE_ON_RECEIVE
*/
this.EVENT_MODE_ON_RECEIVE = 'eventModeOnReceive';
/**
* Event that is dispatched whenever the player encounters a potential conformance validation that might lead to unexpected/not optimal behavior
* @event MediaPlayerEvents#CONFORMANCE_VIOLATION
*/
this.CONFORMANCE_VIOLATION = 'conformanceViolation';
/**
* Event that is dispatched whenever the player switches to a different representation
* @event MediaPlayerEvents#REPRESENTATION_SWITCH
*/
this.REPRESENTATION_SWITCH = 'representationSwitch';
/**
* Event that is dispatched whenever an adaptation set is removed due to all representations not being supported.
* @event MediaPlayerEvents#ADAPTATION_SET_REMOVED_NO_CAPABILITIES
*/
this.ADAPTATION_SET_REMOVED_NO_CAPABILITIES = 'adaptationSetRemovedNoCapabilities';
/**
* Triggered when a content steering request has completed.
* @event MediaPlayerEvents#CONTENT_STEERING_REQUEST_COMPLETED
*/
this.CONTENT_STEERING_REQUEST_COMPLETED = 'contentSteeringRequestCompleted';
/**
* Triggered when an inband prft (ProducerReferenceTime) boxes has been received.
* @event MediaPlayerEvents#INBAND_PRFT
*/
this.INBAND_PRFT = 'inbandPrft';
/**
* The streaming attribute of the Managed Media Source is true
* @type {string}
*/
this.MANAGED_MEDIA_SOURCE_START_STREAMING = 'managedMediaSourceStartStreaming';
/**
* The streaming attribute of the Managed Media Source is false
* @type {string}
*/
this.MANAGED_MEDIA_SOURCE_END_STREAMING = 'managedMediaSourceEndStreaming';
}
}
let mediaPlayerEvents = new MediaPlayerEvents();
export default mediaPlayerEvents;
无论你做什么，无论你如何尝试并试图弄清楚它。控制台显示该行存在合成错误
Uncaught SyntaxError: Cannot use import statement outside a module (a
import MediaPlayerEvents from '/MediaPlayerEvents.js';
帮我弄清楚如何正确编写才能导入脚本？为什么不起作用？