I am having hard time using video-player for streaming m3u8 videos Below works but I want to use src from object
<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>
Instead of using hard coded src, I am trying to get src from an object that looks like this :
post: [{post_no:1,post_author:"Mercy", url:"http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",},],
So I thought I could do something like this which none of them worked
<video
id="my-video"
class="video-js"
controls
autoplay
preload="auto"
data-setup="{}"
>
<source type="application/x-mpegURL"
:src="post.url"
/>
</video>
playerOptions: {
preload: "auto",
autoplay: true,
muted: true,
loop: true,
aspectRatio: "4:3",
sources: [
{
type: "application/x-mpegURL",
src: this.post.url,
},
],
},
Sadly, none of them worked. Is there any way I can do?
I managed to figure it out. Instead of using method, using created() solved this problem. So my source code is like this :
created() {
this.playerOptions = {
preload: "auto",
autoplay: true,
muted: true,
loop: true,
aspectRatio: "4:3",
sources: [
{
type: "application/x-mpegURL",
src: this.post.url,
},
],
};
},