How to add redirect links to elements of the Jwplayer playlist

Asked

Viewed 207 times

2

Ola would like the help of you to be able to finalize the code of the Jwplayer that I am doing. As I’m still a beginner there are many things I don’t know how to do until the present time, so I hope I can count on your help.

My problem and the following, I would like to know if it is possible to add in the videos contained within the playlist of Jwplayer instant redirect links.

So that when the user clicks on the image of the video, instead of the video being opened in the player, it is redirected to a specific page, according to the link contained within the element in question. In the code below you have 7 videos in the playlist, and I would like to be able to put 6 different links. To do what I explained.

Keeping running the first video feathers, and perform this procedure only in the 6 videos contained in the gallery that are apois the first video that this in the first position.

I learned that to do this type of procedure using javascript. More as I mentioned I’m still beginner.

My code from Jwplayer

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="robots" content="noindex">
        <meta name="googlebot" content="noindex">
                <script src="https://content.jwplatform.com/libraries/As3vnHJG.js"></script>
                <script type="text/javascript">
        /* <![CDATA[ */
        var JWp = {

            'flashplayer': '//cdn.jsdelivr.net/jwplayer/5.10/player.swf',
            'skin-name': 'seven',
            'skinactive': '#0099ff',
            'skininactive': '#f9f9f9',
            'skinbackground': '#000000',
            'logofile': '',
            'logoposition': 'top-right',
        };
        /* ]]> */
        </script>
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
    </head>
    <body data-rsssl=1>
        <div id="video"></div>
        <script type="text/JavaScript">
            var playerInstance = jwplayer("video");
            playerInstance.setup({
                playlist: [{
  file: 'video url',
  image: 'imagem',
  title: 'titulo',
  mediaid: '1'
},
{
  file: 'video url',
  image: 'imagem',
  title: 'titulo',
  mediaid: '2',
}, {
  file: 'video url',
  image: 'imagem',
  title: 'titulo',
  mediaid: '3',
}, {
  file: 'video url',
  image: 'imagem',
  title: 'titulo',
  mediaid: '4',
}, {
  file: 'video url',
  image: 'imagem',
  title: 'titulo',
  mediaid: '5',
}, {
  file: 'video url',
  image: 'imagem',
  title: 'titulo',
  mediaid: '6',
}, {
  file: 'video url',
  image: 'imagem',
  title: 'titulo',
  mediaid: '7',
}, ],
                mute: "false",
                autostart: "false",
                repeat: "false",
                abouttext: JWp.abouttext,
                aboutlink: JWp.aboutlink,
                height: "100%",
                width: "100%",
                stretching: "uniform",
                primary: "html5",
                flashplayer: JWp.flashplayer,
                preload:"metadata",
                skin: {
                    name:JWp.skinname,
                    active:JWp.skinactive,
                    inactive:JWp.skininactive,
                    background: JWp.skinbackground
                },
                logo: {
                    file:JWp.logofile,
                    hide:"false",
                    link:JWp.logolink,
                    margin:"15",
                    position:JWp.logoposition
                }
            });

        </script>
    </body>
</html>
javascript html player

1 answer

1


You can use the events to get the attributes in your json playlist.

jwplayer("player").setup({

  playlist: [{
    "file": "//content.jwplatform.com/videos/RDn7eg0o-cIp6U8lV.mp4",
    "image": "//content.jwplatform.com/thumbs/RDn7eg0o-720.jpg",
    "title": "Surfing Ocean Wave",
    "site": "www.yahoo.com"
  }, {
    "file": "//content.jwplatform.com/videos/tkM1zvBq-cIp6U8lV.mp4",
    "image": "//content.jwplatform.com/thumbs/tkM1zvBq-720.jpg",
    "title": "Surfers at Sunrise",
    "site": "www.bing.com"
  }, {
    "file": "//content.jwplatform.com/videos/i3q4gcBi-cIp6U8lV.mp4",
    "image": "//content.jwplatform.com/thumbs/i3q4gcBi-720.jpg",
    "title": "Road Cycling Outdoors",
    "site": "www.google.com"
  }]

});

jwplayer('player').onPlay(function(event) {

  index = jwplayer('player').getPlaylistIndex();
  item = jwplayer('player').getPlaylistItem(index);
  window.location.href = item.site
});
<script src="https://content.jwplatform.com/libraries/As3vnHJG.js"></script>
<div id="player"></div>

  • Thanks for the reply, but I still don’t understand how I can change from alert event to redirect mode.

  • Hello @Ani I edited the reply and entered the redirect to another page (window.location.href = item.site). I put Alert to illustrate how you could get the link contained in your playlist. If you solve your problem, please mark as an answer so you can help others with your same problem. Att.

  • This works perfectly, but I mentioned an incorrect point, the player should have at most the first video working, after that click on the listing, in playlist mode just redirect, if the gallery item is clicked. Would it be possible to pass this correction, I apologize in advance. I edited the question to stay in compliance, with the answer.

  • You can do this: if(index > 0){ window.location.href = item.site }

  • Thank you now everything is working perfectly. I have a question, I need to give a small improvement in the code, I have to open a new question topic ?

  • I appreciate being able to help you. Yes, create another topic and include your code. So other people can help you too. If you have any questions about how the stack works see help center: https://answall.com/help. Att.

Show 1 more comment

Browser other questions tagged javascript html player

You are not signed in. Login or sign up in order to post.