Autoplay to false div player

API
1

Hello, I just want to ask if there’s a possible way to set autoplay false the twitch div player where in, If the youtube or fb tab is active, the twitch div player will automatically pause?

here is the code for the button and divs:

 <ul class="main-menu-header">
  <li role="presentation" class="active"><a href="#user-twitch" class="admin_header_active" id="twitch" aria-controls="user-twitch" role="tab" data-toggle="tab">Twitch</a></li>
  <li role="presentation"><a href="#user-youtube" id="youtube" aria-controls="user-youtube" role="tab" data-toggle="tab">Youtube</a></li>
  <li role="presentation"><a href="#user-facebook" id="facebook" aria-controls="" role="user-facebook" data-toggle="tab">Facebook</a></li>
   </ul>
          
<!-- Twitch Vid Player -->
        <div class="row" id="user-twitch">
            <div class="col-md-12">
                <div >
                    <input type="hidden" name='match_id' value='{{$match->id}}' />
                    <div id="player" style="width: 50% !important;"></div>
                </div>
            </div>
        </div>
        <!-- Youtube Vid Player -->
        <div class="row" id="user-youtube">
            <div class="col-md-12">
                <div >
                    <iframe width="600" height="345" src="https://www.youtube.com/embed/{{$match->stream_yt}}?autoplay=1"></iframe>
                </div>
            </div>
        </div>
        <!-- Facebook Vid Player -->
        <div class="row" id="user-facebook">
            <div class="col-md-12">
                <div >
                    <div class="fb-post" data-href="https://www.facebook.com/{{$match->stream_fb}}/" data-width="600"></div>
                </div>
            </div>
        </div>

and here is the code for the JS:

<script>
$(document).ready(function(){
    $('#twitch').click(function(){
        $(this).addClass('admin_header_active');
        $('#user-youtube').removeClass('admin_header_active');
        $('#user-facebook').removeClass('admin_header_active');

        $('#user-twitch').fadeIn();
        $('#user-youtube').hide();
        $('#user-facebook').hide();
    });
    $('#youtube').click(function(){
        $(this).addClass('admin_header_active');
        $('#user-twitch').removeClass('admin_header_active');
        $('#user-facebook').removeClass('admin_header_active');

        $('#user-twitch').hide();
        $('#user-youtube').fadeIn();
        $('#user-facebook').hide();
    });
    $('#facebook').click(function(){
        $(this).addClass('admin_header_active');
        $('#user-youtube').removeClass('admin_header_active');
        $('#user-twitch').removeClass('admin_header_active');

        $('#user-twitch').hide();
        $('#user-youtube').hide();
        $('#user-facebook').fadeIn();
    });
})

and this is for the twitch js

<script type ="text/javascript">

var options = {
width: 600,
height: 480,
layout: “video”,
channel: ‘{{$match->stream_twitch}}’,
autoplay: false
};
var embed = new Twitch.Player(“player”, options);
changeChannel = (chan) => {
embed.setChannel(chan);
}

note: $match->stream is equals to its db column. you can ignore it

2

This is covered in the documentation

You are asking basic JS/HTML questions again.

What you really want is not the autoplay but the volume or play/pause controls. Or leave it allow and let the user decide what to do.

3

yeah sorry, I really am just new to js. but is this the one? pause():void Pauses the player. ? how do I even put it to code?

4

Because what this topic is all about is that, If i’m in the other tab, not the twitch tab, it still runs the api fetching data if u inspect element and see for the Network. it still fetches data because the twitch stream is still playing, it won’t pause.

5 
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    video: "<video ID>",
    collection: "<collection ID>",
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

But swap setVolume(0.5) for pause()

6

it doesn’t work sir. it still plays even tho i’m not on the twitch nav

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.