Play video from native url ( file:// ) with WebView ? about ui

[Vunovati]

Updated docs: shoutem/shoutem.github.io#43

[tdurand]

Just to let you know that i filled an issue on React native tracker : facebook/react-native#10171

[Vunovati]

Thanks, as this is more a non ui-toolkit-specific question.

I tried to reproduce what you did with this video and I get:

{
    "domain": "WebKitErrorDomain",
    "canGoBack": false,
    "target": 143,
    "code": 204,
    "loading": false,
    "title": "",
    "canGoForward": false,
    "description": "Plug-in handled load",
    "url": "file:///Users/ovca/Library/Developer/CoreSimulator/Devices/55C21DB9-9F17-4D…ainers/Data/Application/9F325E1A-7E61-4D8E-A591-26CB4DF593BE/tmp/small.mp4"
}

but it plays the video in the iOS video player all the way to the end. On the other hand, I cannot control it, it plays right away after it has been rendered.

This is the first time I’ve tried this since we didn’t need the playback of local files. You could maybe show some kind of poster image and then render the WebView when the image is clicked.

If you want to play local videos you can also try using react-native-video as it officially supports it. Initially, we used it for our video components, but we figured out we can get away with using WebView for most of our needs.

React Native WebView also has its limitations, especially on Android where we cannot get it to play full screen yet, but I think that can be fixed in RN in the future.

[tdurand]

Hello,

Thanks for testing. So on your device it actually plays ? On mine it replace the container with the error and that's it. (like the gif on the issue shows)

If i can get this working i may consider do the hack you suggest.

Also you may consider add a note in your Documentation telling people that it won't work for local files.

Thanks,

PS: Yeah, i know my other alternatives, but as everyone i want to write the fewer code i can to reach my goals and avoid further maintenance ;-) . And react-native-video doesn't yet provide a nice UI with play pause, seek bar ... as native, you need to code it yourself, but i will likely need to tackle that... I'll get inspiration from the code you write, there is also : https://github.com/ldn0x7dc/react-native-media-kit , https://github.com/charliesbox/react-native-media-controls , i must admit i'm a bit disapointed that RN doesn't provide Audio and Video component out of the box...

[Vunovati]

Thanks for the tip. Media controls lib could be of use, but react-native-videos has native controls prop which seems to me like a better deal.

Will update docs 👍