Fetching Movie Trailers.

[GnyanVarun]

Hi @lacymorrow , I am having the issue with fetching the trailers from the TMDB API. I have written this code in the program but it is showing as error message as Failed to load trailer.

I have also referenced in the main API service file that is created in the project.

Could you please help me with this?

class TrailerButtonWidget extends StatelessWidget {
final int movieId;

const TrailerButtonWidget({super.key, required this.movieId});

Future _launchYouTube(String url) async {
final Uri uri = Uri.parse(url);
if (await canLaunchUrl(uri)) {
// Automatically redirects to YouTube app or browser
await launchUrl(uri, mode: LaunchMode.externalApplication);
} else {
throw 'Could not launch $url';
}
}

@OverRide
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
onPressed: () async {
try {
final trailerKey = await ApiService().fetchTrailerUrl(movieId);
if (trailerKey != null) {
final trailerUrl = 'https://www.youtube.com/watch?v=$trailerKey';
await _launchYouTube(trailerUrl);
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Trailer not available.')),
);
}
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Failed to open trailer: $e')),
);
}
},
child: const Text('Watch Trailer'),
),
);
}
}

/// Fetch trailer URL (example placeholder)
Future<String?> fetchTrailerUrl(int movieId) async {
try {
final response = await http.get(
Uri.parse('$baseUrl/movie/$movieId/videos?api_key=$apiKey'),
);

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    final results = data['results'] as List;

    // Look for a YouTube trailer
    final trailer = results.firstWhere(
      (video) => video['type'] == 'Trailer' && video['site'] == 'YouTube',
      orElse: () => null,
    );

    // Return the full YouTube URL if a trailer is found
    if (trailer != null) {
      return 'https://www.youtube.com/watch?v=${trailer['key']}';
    }

    // No trailer found
    return null;
  } else {
    throw Exception('Failed to load trailer: ${response.reasonPhrase}');
  }
} catch (e) {
  print('Error in fetchTrailerUrl: $e');
  return null;
}

}

[lacymorrow]

I might be able to help, could you format the code a little better? What is the search term?

[GnyanVarun]

Hi @lacymorrow Thank you for your help. I just tried to edit the code for the trailers part from my end. The redirection to youTube is quite efficient, the trailer is being played but the video always shows as a blank screen. Here is the code that I have written for the trailer button widget that renders in the user interface.

This is the code that I have written that tracks the data from the TMDB API.

Could you please help me with this?

Thank you.

[lacymorrow]

Can you create a stackblitz or codepen?

This isn't really a movie-trailer issue, but I may be able to help if you post a reproduction.