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
      });
    }
  }