时间戳

首页 > 解决方案 > 无法在 vue.js 应用程序中播放 Mux 资产

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

问题描述

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

但是，当我尝试在我的应用程序中实现它时 -按照他们的说明- 我得到一个黑色的视频屏幕/没有内容。

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

<video 
    id="minVideo"                     
    controls
    height="auto"
    width="800px"
    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>

我错过了什么？

标签： vue.jsvideomuxhls.js

解决方案

这对我有用：

<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>

推荐阅读