Adding redirect links to Jwplayer playlist elements

Question

Adding redirect links to Jwplayer playlist elements

Navigation

#1 by (0 votes)

2

Hello, I would like your help in completing the Jwplayer code I am doing. Since I'm still a beginner, there's a lot I can not do until now, 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 immediate redirect links in the videos contained within the Jwplayer playlist.

So that when the user clicks on the video image, 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 wish I could put 6 different links. To do what I explained.

Keeping the first video working fine, and perform this procedure only on the 6 videos contained in the gallery that support the first video that is in the first position.

I've heard that you can do this kind of procedure using javascript. More like I mentioned I'm still a beginner.

My Jwplayer code

    <!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><scripttype="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

asked by anonymous 07.08.2018 / 20:44

1 answer

Vertical dropdown menu and Images Conversion error when sending input to controller to save

score 0 · Accepted Answer

You can use events to pick up 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><divid="player"></div>