Table of contents

Inject video source

How to inject a video source into Flowplayer Native from a page url query string.

Sample usage

Please check the codepen demo for an example usecase. The demo embeds an iframe using the standalone demo of the player setup with query parameter as the iframe source, enabling you to create a single iframe source page and change the featured video through the query string.

Code for the source page

<!DOCTYPE html>
<html>
    <head>
        <title>Pass video to player</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS for player skin -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />

<style>
    #player {max-width: 65%;}
    </style>

<!-- player script and plugin -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/default/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>

</head>

<body>
<h1>Pass video to player</h1>
<!-- wrapper -->
<div class="container">
<!-- the empty container for the player -->
<div id="player"></div>
<!-- the player script -->
<script>
const urlParams = new URLSearchParams(window.location.search);
//define 'video' as the identifier for the query string
const videoUrl = urlParams.get('video');
window.player = flowplayer("#player", {
token: "eyJraWQiOiI3UHZaeldXb0FIZVAiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCI3UHZaeldXb0FIZVBcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.bZ5RwNgUkNYZCSzXhbyqBCeKvRx4IX98mUjvatFl5qYkawLX81Ei8V3kbQLpKangrzuc6cXRGutrgnSAdb6cug",
// here we use the const defined above
src: videoUrl,
title: "flowplayer using source via urlparam"
})
</script>
</div>    
</body>
</html>

Standalone demo

Follow the link to see how the video url from the query string is played player page with url query string

Retry connection (WC)
Results