Stream Embed live stream same column value in the database

[jcmanolong21]

I’ve been working on this for a week now, and what I want to do is that my video player which has an ID of “stream” and my column name from db is also “stream”, the vid player will automatically play based on the value on the db table. this is a twitch API. here is the code for the player:

<div class="m-container2 pull-left">
<input type="hidden" name="match_id" value="{{$match->id}}" />
<div id="stream" value ="{{$match->stream}}"></div>
</div>

and this is for the JS:

 var options = {
        width: 854,
        height: 480,
        layout: "video",
        autoplay: false
        };
        var embed = new Twitch.Player("stream", options);     
        changeChannel = (chan) => {
        embed.setChannel(chan);
        }

and if needed  to understand the function, this is the code for the editing the text field.

<input type ="text" name="stream" id="stream" class='form-control' value="{{$match->stream}}" style="width: 45%;"/>
<button id="editStreamBtn" type="button" onClick="changeChannel(document.getElementById('stream').value)" class="btn btn-success" data-edit-text="Update">Update</button>

upon editing and updating the video it works fine and it gets the right channel, until it refreshes the page, the text field is the same value as the updated one, but the stream player isn't working the same way. Any ideas why? TYIA

[jcmanolong21]

I’ve also tried inputting

channel: “stream” inside the var embed, but it still doesn’t work.

[BarryCarlyon]

This was covered here

Multiple embedded stream twitch API

And documented

Embedding Twitch

The player API is documented

Video & Clips

From your code you seem to be using the Interactive player and not everywhere, documented:

Video & Clips

Check the docs, and check the console of the browser you are testing in for errors.

I took your player code, and called the changeChannel function.

Works fine.

However in your source code you do have two elements with the id of “stream”. One is the div and one is the channel input field. So you fetch the channel name from the input and then try to update that input field to be an existing Twitch Player, which of course doesn’t work

[jcmanolong21]

Thanks for your reply Barry, but dang it. I really still don’t know how to qery it out. i’ve changed the player div id to “player” but it still doesn’t work, is there any way for it to become an interactive player barry? i really do need this functionality i just want the value of the div player to be the exact column db value which is $match->stream.
please help!

[BarryCarlyon]

<div id="player"></div>
<script>
 var options = {
        width: 854,
        height: 480,
        layout: "video",
        channel: '{{$match->stream}}'
        };
        var embed = new Twitch.Player("player", options);
</script>

This is basic html/js and database value insertion for $language which you have not specified. This is not a general HTMl/JS/$language help forum!

[jcmanolong21]

holy hell barry, you’re a life saver! thank you so much. I didn’t really know that the $match->stream syntax works on the js as well. arigato go saymas sensei!

[BarryCarlyon]

I don’t know if it does.

You didn’t declare what language you are using so I assumed it works similar to other language templating systems

[jcmanolong21]

I’m currently using php and laravel framework. but is there anyway for a js to have both youtube api and twitch api? since the site i’m currently working on is more on csgo dota and sports matches, which sports matches doesn’t have any streams in twitch. so i’m currently researching more into youtube api’s but I just don’t know if a single functionality will parse each api

[BarryCarlyon]

Yes

[jcmanolong21]

can I message you when I have certain questions?