Embedding Lura Player in WordPress

Manual Embedding

To add the Lura player to a WordPress website, you can use the following steps:

1. Login to your WordPress Dashboard and go to the page or post where you want to add the player.
2. In the editor, switch to the "Text" view (instead of the "Visual" view).
3. Copy and paste the following code into the editor:

<script src="https://w3.mp.lura.live/lura-player/latest/loader.js"></script>
<iframe
  id="player"
  style="width: 640px; height: 360px; border: 0px; padding: 0px; margin: 0px"
  allow="autoplay; fullscreen; encrypted-media;"
  allowfullscreen
  webkitallowfullscreen
  mozallowfullscreen
  scrolling="no"
></iframe>
<script>
  const config = {
    token:
      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg",
  };
  const url =
    "https://w3.mp.lura.live/lura-player/latest/fullscreen.html?key=" +
    btoa(JSON.stringify(config));
  document.getElementById("player").src = url;
</script>

Note that you need to replace the placeholder value for the "token" property with your own Lura player token.

Save the changes to the page or post. The Lura player should now be embedded in your WordPress page or post. You can adjust the width and height values in the code to control the size of the player.

Creating a Plugin

To add the Lura player to a WordPress website using a plugin, you can use the following steps:

1. Create a new directory in the "wp-content/plugins" folder of your WordPress installation and name it something like lura-player.
2. Create a new file in the "lura-player" directory and name it "lura-player.php". This will be the main plugin file.
3. Open the "lura-player.php" file in a text editor and paste the following code:

<?php
/**
 * Plugin Name: Lura Player
 * Plugin URI: https://www.akta.tech
 * Description: A plugin to add the Lura player to WordPress pages and posts.
 * Version: 1.0
 * Author: Akta Tech
 * Author URI: https://www.akta.tech
 * License: EULA
 */

function lura_player_script() {
  wp_enqueue_script( 'lura-player-loader', 'https://w3.mp.lura.live/lura-player/latest/loader.js' );
}
add_action( 'wp_enqueue_scripts', 'lura_player_script' );

function lura_player_shortcode( $atts ) {
  $a = shortcode_atts( array(
    'config' => '',
    'width' => '640',
    'height' => '360'
  ), $atts );

  $output = '
  <iframe
    id="player"
    style="width: '.$a['width'].'px; height: '.$a['height'].'px; border: 0px; padding: 0px; margin: 0px"
    allow="autoplay; fullscreen; encrypted-media;"
    allowfullscreen
    webkitallowfullscreen
    mozallowfullscreen
    scrolling="no"
  ></iframe>
  <script>
    const url =
      "https://w3.mp.lura.live/lura-player/latest/fullscreen.html?key=" +
      btoa(JSON.stringify('.$a['config'].'));
    document.getElementById("player").src = url;
  </script>';
  return $output;
}
add_shortcode( 'lura_player', 'lura_player_shortcode' );

4. Save the changes to the lura-player.php file. The plugin should now be installed in your WordPress site. To add the Lura player to a page or post, you can use the following shortcode:

[lura_player config='{"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg"}']