Jwplayer com playlist personalizada com utilização de javascript
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 link
$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);
$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>Discussão (0)
Carregando comentários...