calc, support, media各自的含义及用法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了calc, support, media各自的含义及用法相关的知识,希望对你有一定的参考价值。

参考技术A @support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算;

@media 查询,你可以针对不同的媒体类型定义不同的样式。

视频元素错误:MEDIA_ERR_SRC_NOT_SUPPORTED

【中文标题】视频元素错误:MEDIA_ERR_SRC_NOT_SUPPORTED【英文标题】:Video Element Error: MEDIA_ERR_SRC_NOT_SUPPORTED 【发布时间】:2017-06-29 07:34:23 【问题描述】:

我正在尝试使用 dash.js 播放 dash mpd 文件。我使用 axinom tutorial 获得指导,建议使用以下命令生成 mpd 文件。

mkdir dash_unprotected
MP4Box -dash 4000 -rap -frag-rap -sample-groups-traf -profile dashavc264:live
-bs-switching no -segment-name dash_$RepresentationID$_$Number$ -url-template
video-700k.mp4 video-1000k.mp4 video-1500k.mp4 video-2000k.mp4 audio.mp4 -out
"dash_unprotected/manifest.mpd"

生成的 mpd 文件

 <?xml version="1.0"?>
<!-- MPD file Generated with GPAC version 0.5.1-DEV-rev5619  on 2017-06-29T06:08:26Z-->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500000S" type="static" mediaPresentationDuration="PT0H1M55.01S" profiles="urn:mpeg:dash:profile:isoff-live:2011, http://dashif.org/guildelines/dash264">
 <ProgramInformation moreInformationURL="http://gpac.sourceforge.net">
  <Title>dash_unprotected/manifest.mpd generated by GPAC</Title>
 </ProgramInformation>

 <Period duration="PT0H1M55.01S">
  <AdaptationSet segmentAlignment="true" maxWidth="316" maxHeight="576" maxFrameRate="30" par="316:576" lang="und">
   <SegmentTemplate timescale="15360" media="dash_dash_unprotected$$Number$.m4s" startNumber="1" duration="49009" initialization="dash_dash_unprotected$init.mp4"/>
   <Representation id="1" mimeType="video/mp4" codecs="avc1.64002a"   frameRate="30" sar="396:395" startWithSAP="1" band>
   </Representation>
   <Representation id="2" mimeType="video/mp4" codecs="avc1.64002a"   frameRate="30" sar="1:1" startWithSAP="1" band>
   </Representation>
   <Representation id="3" mimeType="video/mp4" codecs="avc1.64002a"   frameRate="30" sar="1:1" startWithSAP="1" band>
   </Representation>
   <Representation id="4" mimeType="video/mp4" codecs="avc1.64002a"   frameRate="30" sar="396:395" startWithSAP="1" band>
   </Representation>
  </AdaptationSet>
  <AdaptationSet segmentAlignment="true" lang="und">
   <SegmentTemplate timescale="44100" media="dash_dash_unprotected$$Number$.m4s" startNumber="1" duration="174856" initialization="dash_dash_unprotected$init.mp4"/>
   <Representation id="5" mimeType="audio/mp4" codecs="mp4a.40.2" audioSamplingRate="44100" startWithSAP="1" band>
    <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
   </Representation>
  </AdaptationSet>
 </Period>
</MPD>

然后我尝试使用下面的 JavaScript 代码在 dash.js 中播放它

    var url = "drm/dash_unprotected/manifest.mpd";
    var player = dashjs.MediaPlayer().create();

$(function() 
    player.initialize(document.querySelector("#videoPlayer"),null, true);
    player.attachVideoContainer(document.getElementById("videoContainer"));

    $('#playButton').click(function() 
        player.attachSource(url);
    );
);

但是 dash.js 会抛出错误

[42585] Video Element Error: MEDIA_ERR_SRC_NOT_SUPPORTED (CHUNK_DEMUXER_ERROR_APPEND_FAILED: audio object type 0x40 does not match what is specified in the mimetype.) 
dash.all.debug.js:14793 [42586] [object MediaError] 
dash.all.debug.js:14793 [42588] Schedule controller stopping for video 
dash.all.debug.js:14793 [42589] Schedule controller stopping for audio 
dash.all.debug.js:14793 [42591] Caught pending play exception - continuing (NotSupportedError: Failed to load because no supported source was found.)

我该如何解决这个错误?我是 dash.js 和 mpeg-dash 工作人员的新手

【问题讨论】:

Please don't put tags in question titles @Liam 哦,对不起。感谢指正 【参考方案1】:

我能够通过删除-segment-name 选项及其值来解决错误。所以我的命令看起来像这样

 mkdir dash_unprotected
MP4Box -dash 4000 -rap -frag-rap -sample-groups-traf -profile dashavc264:live
-bs-switching no -url-template
video-700k.mp4 video-1000k.mp4 video-1500k.mp4 video-2000k.mp4 audio.mp4 -out
"dash_unprotected/manifest.mpd"

-segment-name 选项使我的段相互覆盖。例如要被音频片段覆盖的视频片段。 正在发生覆盖,因为即使我对 -segment-name 选项使用唯一值,视频和音频段也被赋予相同的名称。

-segment-name $RepresentationID$$-segment-name $Time$$

消除此选项使 MP4Box 使用默认值 %s_dash-segment-name。所以音频片段会这样命名

 audio_dash1.m4s

还有这样的视频片段

 `video_dash1.m4s`

【讨论】:

以上是关于calc, support, media各自的含义及用法的主要内容,如果未能解决你的问题,请参考以下文章

@support浏览器兼容判断 以及 @media媒体查询

嵌套 CSS @supports 和 @media 查询

视频元素错误:MEDIA_ERR_SRC_NOT_SUPPORTED

为啥@custom-media 没有在 sass 中应用各自的样式

在 IE 中加载 6 个音频后 Html5 音频返回错误 MEDIA_ERR_SRC_NOT_SUPPORTED

在 calc (css) 中使用 screen.width