Jump to content
Ryumaru

Jwplayer com playlist personalizada com utilização de javascript

Recommended Posts

Ryumaru

Olá estou tendo um pequeno problema na utilização do JWPlayer, estou querendo utilizar ele para montar uma playlist personalizada, eu estou adaptando essa playlist para funcionar em um tema de WordPress.

Ao invés de utilizar arquivos de vídeo para montar a listagem personalizada. Eu estou utilizando a lista de episódios contida no banco de dados.

Eu consegui fazer o modo playlist funcionar perfeitamente, mais o que eu necessito, é por os links das paginas dos episódios correspondentes, nas imagens correspondentes da playlist funcionem como links de página, utilizando as configurações de javascript do jwplayer.

De forma que quando o usuário clicar na imagem, abra a página do player na head do navegador. Como se fosse um link de pagina convencional.

Gostaria de saber se alguém pode me ajudar.

Nota: No código abaixo eu não coloquei o código que gera as urls das paginas correspondentes por causa da falta desse complemento.

Segue abaixo o código.

<?php
/*
Template Name: DT - jwplayer
*/

if( isset( $_GET['source'] ) and isset( $_GET['id'] ) ) {

// main data
$id     = isset( $_GET['id'] ) ? $_GET['id']         : null;
$mp4url = isset( $_GET['source'] ) ? $_GET['source'] : null;
// Descriptar Url Dooplay Anime
$source = encrypt_decrypt('decrypt', $mp4url);
// Coloca o titulo do Episodio
$tituloEpisodio =  $_GET['tituloep'];
// Options
$abouttext      = get_option('dt_jw_abouttext');
$skinname       = get_option('dt_jw_skinname');
$skinactive     = get_option('dt_jw_skinactive');
$skininactive   = get_option('dt_jw_skininactive');
$skinbackground = get_option('dt_jw_skinbackground');
$jwlogo         = get_option('dt_jw_logo');
$jwkey          = get_option('dt_jw_key');
$jwlogoposit    = get_option('dt_jw_logo_position');
$image          = rand_images('imagenes', $id, 'original', true, true);
$episodioNome   = get_post_meta($id, 'serie', true);
$episodioNumero = get_post_meta($id, 'episodio', true);

// Aqui fica a url da imagem do player do site caso não tenha imagem radonia
$imagemPlayer   = get_option('dt_logo_footer');
// alternativo sem radonio $image = rand_images('dt_backdrop', $id, 'original', true, true);

// End PHP

$postid = $_GET['id'];
$tmdb = get_post_meta($postid, "ids", $single = true);
$current_season = get_post_meta($post->ID, "temporada", $single = true);
$data = season_of($tmdb);
?>
<!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">
        <?php /* Url antiga <script src="<?php echo DOO_URI. '/assets'; ?>/jwplayer/jwplayer.js"></script> */ ?>
        <script src="https://content.jwplatform.com/libraries/fNkNmTXG.js"></script>
        <script src="<?php echo DOO_URI. '/assets'; ?>/jwplayer/provider.html5.js"></script>
        <?php /* chave desativada <script>jwplayer.key="<?php echo $jwkey; ?>";</script> */ ?>
        <script type="text/javascript">
        /* <![CDATA[ */
        var JWp = {
            'mp4file': '<?php echo $source; ?>',
            'image': '<?php if ($image == true) { echo esc_url($image); } else { echo $imagemPlayer; } ?>',
            'abouttext': '<?php echo $abouttext; ?>',
            'aboutlink': '<?php echo esc_url( home_url() ); ?>',
            'flashplayer': '<?php echo DOO_URI. "/assets/jwplayer/jwplayer.flash.swf"; ?>',
            'skin-name': '<?php echo $skinname; ?>',
            'skinactive': '<?php echo $skinactive; ?>',
            'skininactive': '<?php echo $skininactive; ?>',
            'skinbackground': '<?php echo $skinbackground; ?>',
            'logofile': '<?php echo $jwlogo; ?>',
            'logolink': '<?php echo esc_url( home_url() ); ?>',
            'logoposition': '<?php echo $jwlogoposit; ?>',
        };
        /* ]]> */
        </script>
        <link rel="stylesheet" type="text/css" href="<?php echo DOO_URI. '/assets'; ?>/jwplayer/skins/seven.css">
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
    </head>
    <body>
        <div id="video"></div>
        <script type="text/JavaScript">
            var playerInstance = jwplayer("video");
            playerInstance.setup({
                playlist: [{
  file: JWp.mp4file,
  image: JWp.image,
  title: '<?php echo $episodioNome.' Episódio '.$episodioNumero; ?>',
  mediaid: '<?php echo $episodioNumero; ?>'
},
<?php $temporada = $data['temporada']['all'];
$capitulos = $data['capitulo']['all'];
foreach($temporada as $key_t=>$value_t){
foreach($capitulos as $key_c=>$value_c){ ?>{
  file: JWp.mp4file,
  image: '<?php if($thumb_id = get_post_thumbnail_id($value_c['id'])) { $thumb_url = wp_get_attachment_image_src($thumb_id,'dt_episode_a', true); echo $thumb_url[0]; } else { dt_image('dt_backdrop', $value_c['id'], 'w500'); } ?>',
  title: '<?php echo $episodioNome; ?> Episódio <?php echo data_of('episodio',$value_c['id']); ?>',
  mediaid: '<?php echo data_of('episodio',$value_c['id']); ?>',
}, <? } } ?>
],
                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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.