m3u8 file which stored in Firebase storage does not play on web players

Question

I have stored m3u8 file in firebase cloud storage and this is URL for m3u8 file

[https://firebasestorage.googleapis.com/v0/b/testing-musicoi.appspot.com/o/MediaContent%2F240p%2F240_out.m3u8?alt=media&token=0f81947b-1df0-4333-ae67-bdf21b4c49cc]

This URL works perfectly when I use VLC Player on my computer but when I try the same link with web players like this HLS media player it does not work. Moreover, I want to know This m3u8 URL would not work with Android Exoplayer?

score 2 · Accepted Answer · answered Aug 12 '20 at 11:05

2

The web player relies on Cross-Origin Resource Sharing, that allows scripts on one domain to access data from another domain. This fails, because your origin domain does not allow access from other domains.

You need to configure the Access-Control-Allow-Origin header to allow bitmovin.com (and other domains) to access your files.

Edit your firebase.json and add or change the hosting section:

"hosting": {
  "headers": [ {
    "source": "**/*.*",
    "headers": [ {
      "key": "Access-Control-Allow-Origin",
      "value": "*"
    } ]
  } ]
}

See Firebase documentation.

answered Aug 12 '20 at 11:05

Albert Peschar

521
3
4

Thank you very much for your quick response. Honestly, I did not know about this and again thank you for your effort. As I understand, I only need to do this for if I'm going to play media on the website, But what about player like android Exoplayer? – Isuru Bandara Aug 12 '20 at 11:31
@IsuruBandara, I don't know about Exoplayer, sorry. – Albert Peschar Aug 13 '20 at 12:03

score 1 · Answer 2 · answered Aug 12 '20 at 16:59

I found a similar question which might be of your interest:

First create an exoplayer in your xml file

<com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/video_view"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="20dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

"I have set the height as 0 cuz im gonna fix the height programmatically later then declare simple SimpleExoPlayer in your activity as player."

 SimpleExoPlayer player;

"Then in you follow these steps"

//declare your PlayerView 

final PlayerView playerView = mview.findViewById(R.id.video_view);

//your database ref

        final StorageReference storageReference =
                FirebaseStorage.getInstance().getReference("/Post_Video/"+ video + ".mp4");


 player = ExoPlayerFactory.newSimpleInstance(MainActivity.this);
        playerView.setPlayer(player);

        playerView.setVisibility(View.VISIBLE);

        playerView.getLayoutParams().height=550;
        playerView.getLayoutParams().width=950;

        storageReference.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
            @Override
            public void onSuccess(Uri uri) {


                BandwidthMeter bandwidthMeter = new DefaultBandwidthMeter.Builder(MainActivity.this).build();
                TrackSelector trackSelector = new DefaultTrackSelector(new AdaptiveTrackSelection.Factory(bandwidthMeter));
                ExoPlayer exoPlayer = (SimpleExoPlayer) ExoPlayerFactory.newSimpleInstance(MainActivity.this);
                Uri video = Uri.parse(uri.toString());
                DefaultHttpDataSourceFactory dataSourceFactory = new DefaultHttpDataSourceFactory("video");
                ExtractorsFactory extractorsFactory = new DefaultExtractorsFactory();
                MediaSource mediaSource = new ExtractorMediaSource(video,dataSourceFactory,extractorsFactory,null,null);
                playerView.setPlayer(exoPlayer);
                exoPlayer.prepare(mediaSource);
                exoPlayer.setPlayWhenReady(false);

            }
        });

m3u8 file which stored in Firebase storage does not play on web players

2 Answers2