theoplayer / samples-html5-sdk Goto Github PK

View Code? Open in Web Editor NEW

26.0 10.0 12.0 7.25 MB

📚 Universal Video Player code samples for web

Home Page: https://codesandbox.io/s/github/THEOplayer/samples-web

HTML 49.43% JavaScript 26.04% CSS 24.53%

theoplayer mpeg-dash hls video-player videojs web-video-player

samples-html5-sdk's Introduction

THEOplayer samples for web

License

This projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.

Introduction

This project will demonstrate how to use THEOplayer for web. if you have any questions please contact [email protected]

Quickstart

Run the static server local npx http-server

The THEOplayer library provided in this sample is currently targeted to the latest version and is set to run on localhost only

Production

To run THEOPlayer in production you will need a valid license set up to run on your domain, you can get it for free on THEOportal

samples-html5-sdk's People

Contributors

Stargazers

Watchers

Forkers

iquipe gssrinivas59 thijsl yhchun-kiswe alberto-nantiat jeremykenedy santly jaydesaitheoplayer mbilliau jgeesey95 r00tmebaby edvjoe

samples-html5-sdk's Issues

vast ads with percentage timeOffset

hello

currrently my vast ads preroll/midroll it's based on fixed time example

        ads: [
            {
                sources: "https://***",
                timeOffset: 300
            },
            {
                sources: "https://***",
                timeOffset: 1500
            },
            {
                sources: "https://***",
                timeOffset: 5500
            },
            {
                sources: "https://***",
                timeOffset: "end"
            }
        ],

and i'm currently using this https://github.com/THEOplayer/docs-html5-sdk/tree/master/reference-apps/ui-visual-cues-midroll-ads

However this requires me to open each video and see if timeOffset it's ok with video duration

what i would like to reach is

        ads: [
            {
                sources: "https://***",
                timeOffset: "10%"
            },
            {
                sources: "https://***",
                timeOffset: "35%"
            },
            {
                sources: "https://***",
                timeOffset: "75%"
            },
            {
                sources: "https://***",
                timeOffset: "end"
            }
        ],

however it's not working

is there any chance to reach this? if not i would like to submit this as a feature request it's really helpfull if you want to use this player for/when you have too many videos!

Seek player programmatically

How can I set the "currentTime" programmatically?
Thanks

how do i set retry timer?

Hey I am having problems with retry timer.

Sometimes the stream is lagging, especially when CBR drops during wifi which essentially turns streaming from offline to online. Here is my problem, it takes about 15-20 seconds for the player to recover, mainly because the the default retry is about 15 seconds and always sees HLS as 404 error.

At this point, it's easier for user to just refresh the page and click play button again.

I see wowza-theoplayer.js has a retry setting on there, but not anywhere else. I don't see the documentation of constructor of THEOplayer.Player and options anywhere, nor player.source options anywhere on theoplayer site.

Impossible to start theoplayer because 'Player' is not exported by 'THEOplayer.js'

Hi
I'm following the WEB SDK guide
https://docs.theoplayer.com/getting-started/01-sdks/01-web/00-getting-started.md

I'm trying to integrate Theoplayer inside a Stencil.js web app.
I'm not able to make the player works because when I build my project I have this warning
'Player' is not exported by 'THEOplayer.js'
and this error TypeError: undefined is not a constructor

infact, instead of
var player = new THEOplayer.Player(element, configuration);
my project builds
var player = new undefined(element, configuration);

I've imported my library from cdn, from node modules and from a theoplayer.js file in my root project, but I'm not able to make it work.

    componentDidLoad() {
        var element = document.querySelector(".theoplayer-container") as HTMLElement;

        var configuration = {
            libraryLocation: "https://cdn.myth.theoplayer.com/91d6fc30-bdfa-4a33-a3a3-e89285339350",
            license: "license key"
        }

        if(element){
            var player = new THEOplayer.Player(element, configuration);
            // Customized video player parameters
            player.source = {
                sources: [{
                    src: '//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8',
                    type: 'application/x-mpegurl'
                }]
            };
        } 
    }

Someone can help? thank you.

display player fully on page

Hello,
can i have some help about how to simply display player fully on page not fluid or fixed width/height

so this is in fluid https://prnt.sc/qy5vzq

what i want to reach is display it fully https://prnt.sc/qy5w9m as big as the page /monitor size is

thanks

MPD AdaptationSet format issue

Hello,
It looks like THEOplayer cannot handle multiple AdaptationSet for videos in mpd file.
It can ready only first.
This is my MPD file:


<?xml version="1.0" encoding="UTF-8"?>

<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd" xmlns:cenc="urn:mpeg:cenc:2013" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011" minBufferTime="PT2S" type="static" mediaPresentationDuration="PT4775.75S">
  <Period id="0">
    <AdaptationSet id="0" contentType="audio" lang="pl" subsegmentAlignment="true">
      <ContentProtection value="cenc" schemeIdUri="urn:mpeg:dash:mp4protection:2011" cenc:default_KID="85cd6603-531c-30f1-bde1-4f42c1611a11"/>
      <ContentProtection schemeIdUri="urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed">
        <cenc:pssh>AAAAYXBzc2gAAAAA7e+LqXnWSs6jy (...)</cenc:pssh>
      </ContentProtection>
      <ContentProtection schemeIdUri="urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95">
        <cenc:pssh>AAACJnBzc2gAAAAAmg (...)</cenc:pssh>
      </ContentProtection>
      <Role schemeIdUri="urn:mpeg:dash:role:2011" value="main"/>
      <Representation id="0" bandwidth="390965" codecs="mp4a.40.2" mimeType="audio/mp4" audioSamplingRate="48000">
        <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="6"/>
        <BaseURL>audio_pl.mp4</BaseURL>
        <SegmentBase indexRange="1546-11129" timescale="48000">
          <Initialization range="0-1545"/>
        </SegmentBase>
      </Representation>
    </AdaptationSet>
    <AdaptationSet id="1" contentType="video" maxWidth="854" maxHeight="480" frameRate="12288/512" subsegmentAlignment="true" par="16:9">
      <ContentProtection value="cenc" schemeIdUri="urn:mpeg:dash:mp4protection:2011" cenc:default_KID="afd78221-3602-370f-83ff-b243198b3e28"/>
      <ContentProtection schemeIdUri="urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed">
        <cenc:pssh>AAAAYXBzc2gAAAAA7e+LqXn (...)</cenc:pssh>
      </ContentProtection>
      <ContentProtection schemeIdUri="urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95">
        <cenc:pssh>AAACJnBzc2gAAAAAmgTwe (...)</cenc:pssh>
      </ContentProtection>
      <SupplementalProperty schemeIdUri="urn:mpeg:dash:adaptation-set-switching:2016" value="2"/>
      <Role schemeIdUri="urn:mpeg:dash:role:2011" value="main"/>
      <Representation id="1" bandwidth="650243" codecs="avc1.42c01e" mimeType="video/mp4" sar="1:1" width="640" height="360">
        <BaseURL>h264_360p.mp4</BaseURL>
        <SegmentBase indexRange="1550-11133" timescale="12288">
          <Initialization range="0-1549"/>
        </SegmentBase>
      </Representation>
      <Representation id="2" bandwidth="1031746" codecs="avc1.4d401f" mimeType="video/mp4" sar="1:1" width="854" height="480">
        <BaseURL>h264_480p.mp4</BaseURL>
        <SegmentBase indexRange="1585-11168" timescale="12288">
          <Initialization range="0-1584"/>
        </SegmentBase>
      </Representation>
    </AdaptationSet>
    <AdaptationSet id="2" contentType="video" maxWidth="1920" maxHeight="1080" frameRate="12288/512" subsegmentAlignment="true" par="16:9">
      <ContentProtection value="cenc" schemeIdUri="urn:mpeg:dash:mp4protection:2011" cenc:default_KID="74a4e404-95b0-385b-a87b-042a398a1933"/>
      <ContentProtection schemeIdUri="urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed">
        <cenc:pssh>AAAAYXBzc2gAAAAA7 (...)</cenc:pssh>
      </ContentProtection>
      <ContentProtection schemeIdUri="urn:uuid:9a04f079-9840-4286-ab92-e65be0885f95">
        <cenc:pssh>AAACJnBzc2gAAAAAmgTweZhAQo (...)</cenc:pssh>
      </ContentProtection>
      <SupplementalProperty schemeIdUri="urn:mpeg:dash:adaptation-set-switching:2016" value="1"/>
      <Role schemeIdUri="urn:mpeg:dash:role:2011" value="main"/>
      <Representation id="3" bandwidth="3009752" codecs="avc1.4d4028" mimeType="video/mp4" sar="1:1" width="1280" height="720">
        <BaseURL>h264_720p.mp4</BaseURL>
        <SegmentBase indexRange="1586-11169" timescale="12288">
          <Initialization range="0-1585"/>
        </SegmentBase>
      </Representation>
      <Representation id="4" bandwidth="5912711" codecs="avc1.64002a" mimeType="video/mp4" sar="1:1" width="1920" height="1080">
        <BaseURL>h264_1080p.mp4</BaseURL>
        <SegmentBase indexRange="1589-11172" timescale="12288">
          <Initialization range="0-1588"/>
        </SegmentBase>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>

The player allows choosing only two qualities: 360p and 480p.
The higher qualities is not available.

When I remove AdaptationSet id="1" , change id at AdaptationSet id="2" to 1, 720p and 1080p is available.

Any idea how to solve this without changing MPD files to single adaptation sets format?

Can't make an AES-128 stream (Azure Media Services) work with THEOPlayer

Hi guys, I didn't find a way to use AES-128 with a protected key endpoint like the following:

#EXT-X-KEY:METHOD=AES-128,URI="https://amssamples.keydelivery.mediaservices.windows.net/?KID=...",IV=...

The endpoint (URI value) expects an Authorization header set with a valid token. How can we set that token with the THEOplayer html5 SDK? I didn't find any sample.

These are the errors we get:

Thanks.

how to enable withcredentials for sending local cookies to server?

Hi Team

I'm looking for a small help about enabling the cookies thing in video.
As like other 3rd party plugins for sending request to server e-g Axios
we do withCredentials: true and it automatically send local browser cookies to server.

I'm curious how I can enable that functionality in theoplayer configuration so that when it sends request to server then local cookies should be sent in headers automatically.

my code example is
function videoOptions (videoUrl: string, videoType?: string) => { return { source: { sources: [ { type: videoType || 'application/x-mpegurl', src: videoUrl } ] } } }

const player = window.THEOplayer && new window.THEOplayer.Player(this.$refs.theoplayer, { fluid: true, libraryLocation: '//cdn.theoplayer.com/dash/theoplayer/', license: 'abc', allowNativeFullscreen: true, mutedAutoplay: true, useCredentials: true }) player.source = this.options && this.options.source;

<TheoPlayer :options="videoOptions('www.abc_file.mp4')" :full-screen='true' :autoplay='true' />

Fallback/Alternate Stream

Hello,
I'm using THEOplayer with live HLS streams and wondering if it's possible to have the player fall back to an alternate stream if the primary one isn't live at the moment. However ideally the player would routinely check the status of that main stream and, once it goes live, refresh the player to play that primary stream. Does that sound like something that's feasible making use of the player API?

Reasons for "There appears to be a playback issue".

Hi there!

I'm working on project for which I can't give too many details about what is being done on the backend, so I just want to ask if there's a reason or a list of reasons for which the following error may come up in the player:

After this error the player enters an unrecoverable state and no controls are available for it.

I will understand if the error is too broad to know the causes for it, but anything would help.

Thanks in advance.

Event for quality change

I know that I can access the available qualities for a track and the active quality using the Media Track API and the addtrack.

What I need now is an event to listen for quality changes in the track (i.e. if the network degrades, the quality changes). I just need the height (720, 144, 1080, etc). Is this possible?

Sample Code for 360 Demo does not work as expected

I am trying to get a 360 demo running but it seems like I'm missing some configuration options. Please let me know what I should be changing.

Note: even the ui parameters don't seem to register when I open the file so it's possible that the script is running too early or too late?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>THEOplayer 2.X: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Chromecast SDK -->
    <script type="text/javascript" src="http://gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

    <!-- THEOplayer library and css -->
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/aa9f2fae-a943-420c-bd08-273678f4c036/ui.css" />

</head>

<body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/aa9f2fae-a943-420c-bd08-273678f4c036/THEOplayer.js"></script>

    <script>
        var element = document.querySelector(".theoplayer-container");
        var player = new THEOplayer.Player(element, {
            libraryLocation: "https://cdn.myth.theoplayer.com/aa9f2fae-a943-420c-bd08-273678f4c036",
            fluid: true,
            ui : {
                width: '800px',
                height: '500px'
            }     
        });

        // OPTIONAL CONFIGURATION
        // Customized video player parameters
        player.source = {
            sources: {
                "src": "https://demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8",
                "type": "application/x-mpegurl"
            },
            // VR configuration
            vr: {
                "360": true
            }
        };

        player.preload = 'auto';
    </script>
</body>

</html>

Show upnext bar on pause

I am trying to show the upnext bar created during the pause event but it's now showing.
I am using this : this._player.upnext.bar.show()
Is it possible?

Thanks

Prevent play event if no source is setted

I have a player mounted on a React app.

My goal is to prevent the play event if no source is setted. Right now, if there is no source, the player allows the play button to be pressed and then it just stays in a "loading" state:

Is there anyway to achieve this?