logo
IntroductionHow to add CSS or JavaScript files to an Android/iOS projectHow to combat autoplay policiesWhy does fullscreen not behave as expected on iOSWhy does the Network API not work on iOS devicesWhy does Chromecast not work on iOS Chrome?Why can't I select another video quality on iOS/tvOS?Is YouTube supportedWhy does the player load only one audio track (even though there are several in the manifest)Is it possible to see 360 degrees photo with THEOplayerWhy the Visibility API does not work through an iframe on Safari and IE11What is an impressionHow to know whether a live stream is playingWhich error related events does the player exposeWhy did my subtitles stop workingHow does Media Engagement Index (MEI) affect Autoplay on ChromeWhat does the error message 'Unknown CDM error' meanWhat does the error message 'Something went wrong with Native playback' meanWhy are not all response headers exposedWhy does the currentTime seem off in my livestream & what can I do about itHow to remove CORS restrictions from a reproduction streamWhich network calls (or requests) does THEOplayer doWhy does the playback not work when using the Chrome iPhone/iPad simulatorWhat does the error message 'can only be initiated by a user gesture' imply? Can I still force the desired actionHow to remove unwanted CC track in iOS or SafariWhy do I get a gray play button in my Android WebView and how to remove it?MediaTek limitationsHow to use ProGuard with THEOplayer Android SDKSelf-hosting and versioning of THEOplayerDoes THEOplayer support EXT-X-DATERANGECan clipping be used on a playlistCan timeline thumbnails be made available before playback startWhat are the benefits of preloadingWhat are the player seeking and seeked events and when are they firedCan we use HLS or DASH adsHow to change text in THEOplayerChange text when AirplayingITP2.1 problems using THEOplayerRemoving context menu/'Powered by THEOplayer v2...'What aspects of THEOplayer do we need to take into account to deploy a proper Content Security Policy (CSP)How can we avoid that the player keeps looking for chunks/segments if they are not foundCan we show a custom message on 403 on mp4Can we prevent UpNext feature from redirectingIs it possible to preload VOD content while the pre-roll is playingWhy is my video not playing automaticallyIs it possible to have multiple player instances play at the same timeIs it a problem if the viewer pauses a live stream for longer than the DVR windowTHEOplayer Features & ModulesChromecast on my webplayer does not work any longer despite no change in my implementationHow to track network errorsWhat is the support for WowzaHow to use the CDN fallback/backup stream featureHow to apply accurate buffering strategyHow can I distribute 4K content?What is the collaboration between Azure Media Services and THEOplayerIs Portrait mode supportedHow to prevent screen recordingThe provided video source is incompatible with the license for this playerPage and Source domainsWhat does the error message “Something went wrong determining the initial period of the provided MPEG-DASH stream” meanWhy is my PlayReady stream not working in Chromium Edge?Which subtitle and CC formats are supported on native SafariHow to navigate through the documentation and resourcesHow to create a (great) ticketHow to investigate a ticketWhat are the limitations of AirPlayWhat are the Edgio challengesHow to use the Media Session APIHow to use THEOplayer iOS SDK on an M1 macWidevine CDM deprecation notice for old browser versions

How to track network errors

THEOplayer currently doesn't throw an error event for all network request errors on all platforms. Sometimes you might want an event to listen for to track network related issues in your QoS/QoE dashboards. To enable this, you can use our Network API.

Web

You can use the Network API as follows to track network requests with status codes 4xx and 5xx

function httpErrorInterceptor(response) {
  if (response.status >= 400 && response.status <= 599) {
    var errorDetails = {
      status: response.status,
      fileType: response.request.type,
      url: response.request.url,
    }
    var networkErrorEvent = new CustomEvent("THEOnetworkerror", {
      detail: errorDetails,
    })
    document.dispatchEvent(networkErrorEvent)
  }
}

player.network.addResponseInterceptor(httpErrorInterceptor)
document.addEventListener("THEOnetworkerror", console.log)

Android

For Android, you'll also use the Network API as you would with our Web SDK but you need to do it through JavaScript injection and pass a message to your Java environment. You need to follow these steps:

  1. Make an assets folder, for instance under android/app/src/main/assets and add a JavaScript file, say interceptor.js
  2. Add your network interceptor code but include a line to send a message with to be able to use the event's information in your Java code

    function createHttpErrorInterceptor() {
     var player = THEOplayer.players[0]
     var interceptor = function (response) {
       if (response.status >= 400 && response.status <= 599) {
         var errorDetails = {
           status: response.status,
           fileType: response.request.type,
           url: response.request.url,
         }
         theoplayerAndroid.sendMessage(
           "THEOplayer.network.error",
           JSON.stringify(errorDetails)
         )
       }
     }
     player.network.addResponseInterceptor(interceptor)
     THEOplayer.HttpErrorInterceptor = interceptor
    }
    
    function destroyHttpErrorInterceptor() {
     if (THEOplayer.HttpErrorInterceptor) {
       var player = THEOplayer.players[0]
       player.network.removeResponseInterceptor(THEOplayer.Interceptor_404)
       THEOplayer.HttpErrorInterceptor = undefined
     }
    }
  3. Link the JavaScript file to your THEOplayer instance as follows

    <com.theoplayer.android.api.THEOplayerView
       android:id="@+id/theoPlayerView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior"
       app:jsPaths="interceptor.js"/>
  4. In the Java file where you configure THEOplayer add the following:

    protected void onCreate(Bundle savedInstanceState) {
       // Code to configure the player
       // ...
       // ...
    
       CreateInterceptor();
       SetSource();
    }
    
    protected void SetSource(){
       // bad url to test if the network response interceptor works
       String url =  "https://cdn.theoplayer.com/video/elephants-dream/playlist2.m3u8";
    
       TypedSource typedSource = TypedSource.Builder
               .typedSource()
               .src(url)
               .type(SourceType.HLS)
               .build();
    
       SourceDescription sourceDescription = SourceDescription.Builder
               .sourceDescription(typedSource)
               .build();
    
       theoPlayer.setSource(sourceDescription);
       theoPlayer.play();
    
    }
    
    protected void HandleNetworkError(String message){
       //Do something with the network error
       Log.i("THEO", "Network error: " + message);
    }
    
    protected void CreateInterceptor(){
       viewBinding.theoPlayerView.evaluateJavaScript("createHttpErrorInterceptor();", null);
    }
    
    protected void DestroyInterceptor(){
       viewBinding.theoPlayerView.evaluateJavaScript("destroyHttpErrorInterceptor();", null);
    }

iOS

On iOS, there are platform-specific constraints that prevent us from giving you the control over network call like you can on Web. Therefore, we expose an event type for this on the network object. You can set up a listener as follows

self.player.network.addEventListener(type: NetworkEventTypes.ERROR) { (everror) in
    // handle the event
}
github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2022. All Rights Reserved.
Leuven
New York
Singapore
Barcelona