TheWidlarzGroup / react-native-video

A <Video /> component for react-native
http://thewidlarzgroup.github.io/react-native-video/
MIT License
7.14k stars 2.88k forks source link

[BUG]: Incorrect VTT Text Track pointing to a URI which returns a 404 page results in black screen on video playback #4037

Closed personalnadir closed 1 week ago

personalnadir commented 1 month ago

Version

6.4.3

What platforms are you having the problem on?

iOS

System Version

15.2 Simulator

On what device are you experiencing the issue?

Simulator

Architecture

Old architecture

What happened?

If the textTracks property has a VTT text track which points to a remote uri which returns a 404 HTML page instead of a valid VTT file, the iOS simulator video player shows a black screen for the duration of the video. The video will be the correct length. onError is not called.

Reproduction

repository link

Reproduction

Step to reproduce this bug are:

The following component consistently causes the issue for me. The issue occurs when the player launches into fullscreen

import React, {useRef, useState} from 'react';
import Video, {TextTrackType} from 'react-native-video';

import{
    View,
    TouchableOpacity,
} from 'react-native';

const VideoButton = ({paused, portrait}) => {
    const player = useRef(null);
    const [playing, setPlaying] = useState(paused);
    const videoStyle = {
        flex:1,
        width: 320,
        height: portrait ? 569 : 180,
        marginTop: 40,
        margin: 10,
        zIndex: 0
    };
    return (
        <View style={{flex:1, backgroundColor:'red'}}>
            <TouchableOpacity
                onPress={()=> {

                    player.current.presentFullscreenPlayer();
                    setPlaying(true);
                }}
            >
                <Video
                    style={videoStyle}
                    paused={!playing}
                    ref={player}
                    source={{uri: 'https://github.com/chromium/chromium/raw/master/media/test/data/90rotation.mp4'}}
                    textTracks={[
                        {
                            title: 'English CC',
                            language: 'en',
                            type: TextTrackType.VTT,
                            uri: 'http://google.com/blargh'
                        }
                    ]}
                />
            </TouchableOpacity>
        </View>
    );
};

export default VideoButton;
KrzysztofMoch commented 1 month ago

@freeboub @seyedmostafahasani should we expect from user to validate their text track or should we do on our side ?

seyedmostafahasani commented 1 month ago

In my opinion, it's better to handle it ourselves, like Android does (on Android, we show the video).

github-actions[bot] commented 1 week ago

This issue is stale because it has been open for 30 days with no activity. If there won't be any activity in the next 14 days, this issue will be closed automatically.