无法在 vue.js 应用程序中播放 Mux 资产

Posted 2023-02-25

【中文标题】无法在 vue.js 应用程序中播放 Mux 资产

【英文标题】：Not able to playback Mux assets in vue.js app

【发布时间】：2020-06-13 16:34:31

【问题描述】：

我只是在测试Mux。创建了一个资产 - 并且（正如 Mux 告诉我的那样）如果 url 刚刚粘贴到 Edge 的地址栏中，它可以正常播放。没有令牌或任何东西——只有“播放网址”。

但是，当我尝试在我的应用程序中实现它时 - as per their instructions - 我得到一个黑色的视频屏幕/没有内容。

我已经通过 npm 安装了 hls.js，它似乎正在工作，因为 if 语句中的 console.log 产生了预期的结果。见以下代码：

<video 
    id="minVideo"                     
    controls
    
    
    class="has-text-centered"
    style="border: 1px solid #000000;"
    >
</video>

<script>
import Hls from 'hls.js';

(function()
    var url = "https://stream.mux.com/Z014FJxxGXOCIcZGu013900aAGgNoaqDEkDYJu00J00SZ74Q.m3u8";

    if (Hls.isSupported()) 
        console.log(url)
        var video = document.getElementById("minVideo");
        var hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(video);
    
)();
</script>

我错过了什么？

【问题讨论】：

放弃这个 - 安装 video.js 并让它立即工作。

【参考方案1】：

这对我有用：

<template>
    <div>
        <h1>Video</h1>
        <video id="myVideo" controls></video>
    </div>
</template>


<script>
import Hls from 'hls.js'
console.log('Hsl', Hls)

export default 
    name:"Video",

    mounted() 
         (function()
            // Replace with your asset's playback ID
            var playbackId = "XXXXXXXXXXXX"
            var url = "https://stream.mux.com/"+playbackId+".m3u8"
            var video = document.getElementById("myVideo")

            let hls = new Hls()
            hls.loadSource(url)
            hls.attachMedia(video)

        )()
    ,


</script>

【参考方案2】：

我发现 hls 网站上的示例运行良好，特别是当不支持 hls (ios) 时，它有一个后备方案

https://github.com/video-dev/hls.js/#embedding-hlsjs

在我的 nuxt 应用程序中，我对此进行了调整：

  mounted() 
    // https://github.com/video-dev/hls.js/#embedding-hlsjs
    const videoSrc = `https://stream.mux.com/$this.playbackId.m3u8`
    // var video = document.getElementById('myVideo')
    const video = this.$refs.video

    if (Hls.isSupported()) 
      let hls = new Hls()
      hls.loadSource(videoSrc)
      hls.attachMedia(video)
     else if (video.canPlayType('application/vnd.apple.mpegurl')) 
      video.src = videoSrc
    
  ,

playbackId 设置为计算值