Video not Playing

[edelworksgithub]

Hi, No error is showing. But video is not playing (In IPhone 6s Simulator). A pre-loader is showing. I am using rn version 0.29.2

[edelworksgithub]

<View style={styles.container}>
        <Video
  style={{width: width, height: width / (16/9)}}
  src={'http://v.yoai.com/femme_tampon_tutorial.mp4'}
  autoplay={true}
  loop={false}
  controls={true}
  muted={false}
  poster={'http://static.yoaicdn.com/shoppc/images/cover_img_e1e9e6b.jpg'}
/>
</View>

[ldn0x7dc]

@edelworksgithub Pls try another video url. It could be a network issue.

[edelworksgithub]

@ldn0x7dc Thanks for the prompt reply. I tried with the other video url too. Can I load url from root path?

Please checkout the screenshot. Iphone 6s simulator.

[edelworksgithub]

source code for ref

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AlertIOS
} from 'react-native';
import {Video} from 'react-native-media-kit';
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
var width = windowSize.width;

class pickedup extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Video
  style={{width: width, height: width / (16/9)}}
  src={'http://pickedup.in/web_assets/videos/aeGgmnQ_460sv.mp4'}
  autoplay={false}
  preload={'none'}
  loop={false}
  controls={true}
  muted={false}
  poster={'http://pickedup.in/web_assets/images/logo_pickedup.png'}
/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  fullScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

AppRegistry.registerComponent('pickedup', () => pickedup);

[edelworksgithub]

Is there a way to load video from root path?

[ldn0x7dc]

@edelworksgithub Have you check the App Transport Security settings? By default, a http url will not be loaded and an error will occur App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file. In this case, you should edit the info.plist to add Allow Arbitrary Loads under App Transport Security Settings

[ldn0x7dc]

@edelworksgithub What do you mean by "root path"?

[edelworksgithub]

@ldn0x7dc Thanks video from URL is now working. I meant from "root path" is react native project directory (local file)

[ldn0x7dc]

@edelworksgithub Got your point. Loading video resource from xcode project is possible. Check the pull request. But I have no idea about loading video resource from js poject like require('./demo.mp4').

[edelworksgithub]

I added the file in xcode resources and the code below

<Video
  style={styles.fullScreen}
  src="resource:aeGgmnQ_460sv.mp4"
  autoplay={true}
  preload={'none'}
  loop={false}
  controls={true}
  muted={false}
/>

The video is not playing. Am I doing anything wrong.

[edelworksgithub]

I think i don't have the latest RCTMediaPlayerView.m file

[edelworksgithub]

@ldn0x7dc I finally managed to copy the lines from committed RCTMediaPlayerView.m file Now its working. Thanks for the help.

Could you please help me with one more point. I want my video to play and stop when it reaches the end. Now it is actually resetting to start point.

[ldn0x7dc]

@edelworksgithub I guess a prop like seekToStartOnEnd is needed to control this behavior. For now, you can modify part of RCTMediaPlayerView

- (void)playerItemDidReachEnd:(NSNotification *)notification {
  if(player) {
    [player seekToTime:kCMTimeZero];
    if (self.loop) {
      [self play];
    }
  }
  [self notifyPlayerFinished];
}

Just remove line [player seekToTime:kCMTimeZero];

[edelworksgithub]

@ldn0x7dc how can I get the current state of video player in ms in onPlayerProgress event

[ldn0x7dc]

@edelworksgithub Have a look at file react-native-media-kit/library/MediaPlayerView.js

_onPlayerProgress(event) {
    let current = event.nativeEvent.current; //in ms
    let total = event.nativeEvent.total; //in ms

    this.props.onPlayerProgress && this.props.onPlayerProgress(current, total);

    if (this.props.controls) {
      this.setState({
        current: current,
        total: total
      });
    }
  }

[edelworksgithub]

@ldn0x7dc Thank you very much.

[openGeeksLab]

Could I play video from path on Android? thank you.

[kingctan]

can't play video from local path on android, how to fix this?

[ilyasfut]

@kingctan @mobileDevNativeCross The uri should start with "file://"