svelte框架第三章详细教学

今天我们来认识一下,媒体有关的东西,比如说

<video
	src={clip}
	bind:duration
	bind:buffered
	bind:seekable
	bind:seeking
	bind:played
	bind:ended
	bind:currentTime
	bind:paused
	bind:volume
	bind:videoWidth
	bind:videoHeight
></video>

视频标签,这样吧,我们来做个小demo让大家理解这个视频的用处

但是你会神奇的发现,官网提供的标签是有问题的

我们需要到rollup.config.js中进行配置

svelte({

            // compilerOptions: {

            //  // enable run-time checks when not in production

            //  dev: !production

            // }

            onwarn:(warnig,handler)=>{

                if(warnig.code==='a11y-autofocus') return

                handler(warnig)

            }

        }),

 有的人可能配置了也会出问题,那就是说,依旧视频出问题,报错

<!-- svelte-ignore a11y-media-has-caption -->

或者说路径是正确的,但是视频没办法进行播放,这个是让人头痛的

 又或者你可以尝试匹配规则

{

            "rules": {

                "jsx-a11y/media-has-caption": [ 2, {

                    "audio": [ "Audio" ],

                    "video": [ "Video" ],

                    "track": [ "Track" ],

                  }],

            }

        },

原文说到:

Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to alt text on an image when an image is unable to load).

The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the muted attribute.

翻译后:

，为媒体提供字幕对聋人用户的理解至关重要。字幕应该是对白、音效、相关音乐线索和其他相关音频信息的转录或翻译。这不仅对可访问性很重要，而且在媒体不可用的情况下对所有用户都很有用(类似于图像无法加载时对图像的alt文本)。

标题应包含所有重要和相关的信息，以了解相应的媒体。这可能意味着标题不是媒体内容中对话的1:1映射。但是，对于具有静音属性的视频组件，字幕是不必要的。

 his rule takes one optional object argument of type object:

翻译后

他的规则有一个object类型的可选对象参数