Provide an example of playing a video asset from app-local assets

Vega Open Beta Q&A
1

We’ve been unable to create a VideoPlayer or KeplerVideoView that plays from app-bundled assets. Can Amazon please provide an example?

We think there are several bugs within:

  • In development, assets that are require()ed resolve to http://localhost:8001/… which go on to be rejected by the video player because http is “insecure”
  • Data-URI encoded assets are rejected for the same reason.
  • We can’t figure out the correct file://… path for assets which “should” be bundled with vpkg

A working example would be great.

4

Hey @mikey

I have tried to build and check a bundled video player using the below code. Can you give it a try and let me know?

BundledVideoPlayer.ts

import React from 'react';
import {VideoPlayer} from '@amazon-devices/react-native-kepler';

const BundledVideoPlayer = () => {
  // For bundled assets, use the asset:// protocol
  const videoSource = {
    uri: 'asset://video/sample.mp4'
  };

  return (
    <VideoPlayer
      source={videoSource}
      style={{flex: 1}}
      controls={true}
      autoplay={false}
    />
  );
};

export default BundledVideoPlayer;

metro.config.js

const {getDefaultConfig} = require('@react-native/metro-config');
const config = getDefaultConfig(__dirname);
// Add video file extensions to asset extensions
config.resolver.assetExts.push('mp4', 'mov', 'avi', 'mkv', 'webm');
// Ensure assets are copied to the bundle
config.transformer.assetRegistryPath = 'react-native/Libraries/Image/AssetRegistry';
module.exports = config;

Steps

  1. Use asset:// protocol for bundled assets:
const videoSource = { uri: 'asset://video/sample.mp4' };
  1. Alternative - Use require() with resolveAssetSource:
import {resolveAssetSource} from 'react-native/Libraries/Image/resolveAssetSource';
const video = require('../assets/video/sample.mp4');
const videoSource = resolveAssetSource(video);
  1. For production builds, assets are bundled at:
file:///data/data/com.your.app/files/assets/video/sample.mp4
  1. Add to manifest.toml:
[[assets]]
source = "assets/"
destination = "assets/"

Warm regards,
Ivy

1 Like
5

Awesome, we certainly didn’t try this incantation - will give that a shot and report back. Thanks!

6

Hey @mikey

Do let me know if this worked for you.

If not, to help us investigate more in depth, kindly provide the following information:
• Build: Specific build where this issue occurs.
• Logs: Relevant error logs, console output, or stack traces that show the failure details.

Warm regards,
Ivy