使用video-js时如何从对象应用src答案

【问题标题】：How apply src from object when using video-js使用video-js时如何从对象应用src
【发布时间】：2022-02-13 13:19:56
【问题描述】：

我很难使用视频播放器来播放 m3u8 视频下面的作品，但我想使用来自对象的 src

<video
            id="my-video"
            class="video-js"
            autoplay
            preload="auto"
            data-setup="{}"
        >
            <source type="application/x-mpegURL"
            src=https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8
            />
        </video>

我没有使用硬编码的 src，而是尝试从如下所示的对象中获取 src：

    post: [{post_no:1,post_author:"Mercy", url:"http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",},],

所以我想我可以做这样的事情，但他们都没有工作

想法1

<video
            id="my-video"
            class="video-js"
            controls
            autoplay
            preload="auto"
            data-setup="{}"
        >
            <source type="application/x-mpegURL"
            :src="post.url"
            />
        </video>

想法2

playerOptions: {
                    preload: "auto",
                    autoplay: true,
                    muted: true,
                    loop: true,
                    aspectRatio: "4:3",
                    sources: [
                        {
                            type: "application/x-mpegURL",
                            src: this.post.url,
                        },
                    ],
                },

遗憾的是，它们都不起作用。有什么办法吗？

【问题讨论】：

Post 是一个数组，所以像 post[0].url
我试过了，但不幸的是它对我不起作用;~;

标签： javascript html video.js

【解决方案1】：

我设法弄明白了。而不是使用方法，使用 created() 解决了这个问题。所以我的源代码是这样的：

    created() {
            this.playerOptions = {
                preload: "auto",
                autoplay: true,
                muted: true,
                loop: true,
                aspectRatio: "4:3",
                sources: [
                    {
                        type: "application/x-mpegURL",
                        src: this.post.url,
                    },
                ],
            };
        },

【讨论】：