HTML5 视频验证错误

发布于 2024-12-02 12:49:42 字数 2446 浏览 0 评论 0原文

我有以下标记,使用 VideoJS 播放器实现(如果有必要,我也可以包含 js):

<video id="example_video_1" class="video-js" width="736" height="352" controls="controls" autoplay="autoplay" loop="loop"> 
    <source src="a/v/jt_homevid.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>                         
    <source src="a/v/jt_homevid.ogg" type='video/ogg; codecs="theora, vorbis"'>         
    <object id="flash_fallback_1" class="vjs-flash-fallback" width="736" height="352" type="application/x-shockwave-flash"  data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" value='config={"playlist":["<? echo $currurl; ?>/a/v/slide-1-joshtaerk-cdcover.jpg", {"url": "<? echo $currurl; ?>/a/v/jt_homevid.mp4","autoPlay":false,"autoBuffering":true}]}' />         
        <img src="a/v/slide-1-joshtaerk-cdcover.jpg" width="736" height="352" alt="Poster Image" title="No video playback capabilities." /> 
    </object> 
</video> 

目前 HTML 验证失败,并显示以下错误消息:

第 152 行,第 82 列:在此上下文中不允许元素源作为元素 video 的子元素。 (抑制该子树中的进一步错误。)...
可以使用元素源的上下文:作为媒体元素的子元素,在任何流内容或轨道元素之前。元素视频的内容模型:如果元素具有 src 属性:零个或多个轨道元素,则透明,但带有没有媒体元素后代。如果元素没有 src 属性:零个或多个源元素,然后是零个或多个轨道元素,然后是透明的,但没有媒体元素后代。

我确实明白,在 W3C HTML5 验证器的开发过程中,我可能不应该相信它,但如果我编码错误,我想确定在哪里以及将来如何防止它。另外,我想确保我正确地解释了错误消息,我认为这应该会发生。

我看不出我如何偏离了该元素允许的上下文。它是媒体元素的子元素(特别是 标签),它位于我认为的任何“流内容”之前,因为我找不到

元素在 W3C 上列为流内容(位于 this link),并且我当前没有任何 元素。

我不确定的一件事是 元素的内容模型中“然后透明”的定义。根据我的理解,如果媒体元素内的元素有效,如果它们在媒体元素的父元素内也有效(来自此线程:我可以在 HTML5),这可能是我失误的地方,因为我在

中有 元素; 父级?

任何人都可以确认这是我的错误,或者我是否应该忽略验证消息?如果这是一个错误,我还应该如何布局我的内容?直接设置视频元素的样式?

提前致谢。

I have the following markup, implemented using the VideoJS player (I can include the js too, if it becomes necessary):

<video id="example_video_1" class="video-js" width="736" height="352" controls="controls" autoplay="autoplay" loop="loop"> 
    <source src="a/v/jt_homevid.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>                         
    <source src="a/v/jt_homevid.ogg" type='video/ogg; codecs="theora, vorbis"'>         
    <object id="flash_fallback_1" class="vjs-flash-fallback" width="736" height="352" type="application/x-shockwave-flash"  data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" value='config={"playlist":["<? echo $currurl; ?>/a/v/slide-1-joshtaerk-cdcover.jpg", {"url": "<? echo $currurl; ?>/a/v/jt_homevid.mp4","autoPlay":false,"autoBuffering":true}]}' />         
        <img src="a/v/slide-1-joshtaerk-cdcover.jpg" width="736" height="352" alt="Poster Image" title="No video playback capabilities." /> 
    </object> 
</video> 

And this is currently failing HTML validation, with the following error message:

Line 152, Column 82: Element source not allowed as child of element video in this context. (Suppressing further errors from this subtree.)…
Contexts in which element source may be used:As a child of a media element, before any flow content or track elements.Content model for element video:If the element has a src attribute: zero or more track elements, then transparent, but with no media element descendants.If the element does not have a src attribute: zero or more source elements, then zero or more track elements, then transparent, but with no media element descendants.

I do understand that I maybe should not be trusting the W3C HTML5 validator at this point in it's development, but if I have miscoded, I would like to identify where, and how to prevent it in the future. Also, I'd like to be sure I am interpreting the error message correctly, which I think should happen along the way.

I cannot see how I have deviated from the allowed contexts for this element. It is a child of a media element (Specifically the <video> tag), it is before any 'flow content' I believe, because I cannot find the <source> element listed as flow content on the W3C (at this link), and I do not have any <track> elements currently.

One thing I'm not certain about is the definition of 'then transparent' in the content model for the <video> element. From my understanding is that if elements inside the media elements are valid if they are also valid inside the parent of the media element (from this thread: Can I have multiple src attributes in an HTML5 <audio> element? Or an src attribute and a <source> element?), and this is perhaps where I've misstepped, as I have the <video> element inside a <div> parent?

Can anyone confirm this as my mistake, or whether I should ignore the validation message? If this is a mistake, how else should I be laying out my content? By styling the video element directly?

Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

你的呼吸 2024-12-09 12:49:42

您的理解是正确的,这看起来确实像是验证器错误。

Validator.nu,它基于与 W3C 验证器相同的验证器引擎,但很可能是更高版本,无任何错误地通过标记。

Your understanding is correct, and this does look like a validator bug.

Validator.nu, which is based on the same validator engine as the W3C validator, but is likely to be a later version, passes the mark-up without any errors.

影子是时光的心 2024-12-09 12:49:42

就我而言,我遇到此错误

在此处输入图像描述

使用以下 html 代码:

<video class="tab" controls>
    Your browser does not support the <video> tag.
    <source src="img/holsbeek-HD720p.mov" type="video/mp4" />
</video>

但如果顺序正确则不会:

<video class="tab" controls>
    <source src="img/holsbeek-HD720p.mov" type="video/mp4" />
    Your browser does not support the <video> tag.
</video>

In my case, I have this error

enter image description here

with this html code:

<video class="tab" controls>
    Your browser does not support the <video> tag.
    <source src="img/holsbeek-HD720p.mov" type="video/mp4" />
</video>

But not if the sequence is right:

<video class="tab" controls>
    <source src="img/holsbeek-HD720p.mov" type="video/mp4" />
    Your browser does not support the <video> tag.
</video>
孤城病女 2024-12-09 12:49:42

此错误现已在 HTML5 验证器中修复。

This bug is now fixed in the HTML5 Validator.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文