webpack 不支持 videojs-contrib-dash 格式

Posted 2023-03-07

【中文标题】webpack 不支持 videojs-contrib-dash 格式

【英文标题】：videojs-contrib-dash format not supported with webpack

【发布时间】：2017-02-04 12:21:35

【问题描述】：

我想做一个支持 Mpeg-DASH 的 plyer。所以我将 Webpack 和 video.js 与 videojs-contrib-dash 插件一起使用：

import videojs from 'video.js'
import 'videojs-contrib-dash'


export default 
  name: 'videojs',
  props: ['src'],
  mounted () 
    let player = videojs(this.$el)

    player.ready(function () 
      player.src(
        src: 'https://s3.amazonaws.com/_bc_dml/example-content/sintel_dash/sintel_vod.mpd',
        type: 'application/dash+xml'
      )
      player.play()
    )
  

（我使用 Vue.js）

但是，我不工作。我在控制台中收到错误MEDIA_ERR_SRC_NOT_SUPPORTED

【参考方案1】：

MEDIA_ERR_SRC_NOT_SUPPORTED 表示browser does not support 流（例如编解码器或容器格式）。但是，这取决于浏览器和/或操作系统。清单中使用的编解码器和容器格式看起来不错，它们应该可以在大多数平台上播放。

我快速检查了一下，视频流在dash.js 中对我没有任何作用（也没有错误），videojs-contrib-dash 使用了它。与其他玩家的另一次检查，如Bitmovin Player，没有任何问题，所以这可能是玩家的错误。

【参考方案2】：

这可行...我将其作为 nuxt.js 应用程序进行了测试。 我更改了以下内容：您可以在脚本标签中加载模块。然后控制模板标签内视频标签中的选项。

<template>

<section data-sr id="dash" class="dash u-full-width">
    <div class="video-background">
      <div class="video-wrap">
        <video id="bgvid" autoplay loop loop="true" muted controls="false" setScheduleWhilePaused="true"
          setFastSwitchEnabled="true">
         <source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml" />
        </video>
      </div>
    </div>
  </section>

</template>

<script>
import '../node_modules/video.js/dist/video-js.css'
import videojs from 'video.js'
import 'dashjs'
import 'videojs-contrib-dash'

export default 
  name: 'hello',
  data () 
    return 
      msg: 'Welcome to Your Vue.js App'
    
  

</script>