So here is the point. I have some files downloaded on my device. Because can be video,mp3 or pdf, it can be nice to display it on a webview so its preview system will do the work for me, and I have no necessity to download any external media player.
I have this code
let's assume that this path:
const path = 'file:///Users/MyUser/Library/Developer/CoreSimulator/Devices/D18AD5B6-22D1-4F57-A162-8A1C5DBCAD7A/data/Containers/Data/Application/BF9347EB-8EDF-45CB-9CFD-08C0C8BE3D5C/Documents/song.mp3';
<WebView
javaScriptEnabled
source={{ uri: path }}
style={{ marginTop: 0 }}
/>
My problem is when I'm trying to load the file, it always raise this error:
I suspect it's about the route of the uri. With require It renders an error as well ( module cannot be resolved).
This app is just for Ios, not Android.
Any help will be really appreciate!
Thanks in advance
I got it!!!
It was rough but finally, I get it.
I did it with a webview finally. What I did:
<WebView source={{ html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>` }} />
With this one, thanks to #marx_tseng I injected HTML on the webview, so I took advantage of the media player from the browser.
I had to load the video/image/mp3 from the bundle.js.It is loading previous when you invoke a webview. In this example, I use RNFetchBlob just to point to the folder that my documents are stored inside my device.
const html = `<script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,</Webview>
Finally, this is the code result:
const html = `<script
src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,
html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>`
}}
/>
Here #plougsgaard Provided with this solution.
https://github.com/wkh237/react-native-fetch-blob/issues/197
I hope that this answer can help if someone is stuck in the same situation.
Cheers!
You cannot play video in webview. please use npm packages like react-native-video it will help you to play videos with more controls
this maybe help you, using html video/audio tag
Related
I have created a react component, within which I've embedded the HTML video tag. The video source is supplied from the local. The video works fine in windows, android, but not in iOS devices.
render() {
return (
<>
<div className={`${styles.slideItem}`}>
<video ref={this.props.videoElements[this.props.index]} id="video" playsInline className={`video ${styles.slideImage}`}>
<source src={this.props.videoHref} type="video/mp4"></source>
</video>
</div>
</>
)}
I've tried adding default attributes of video tag. Even the playsInline doesn't work as expected
I've tried adding the video URL directly to the code, but it doesn't work as expected.
What am I missing? Is this because of the video format?
Thanks in advance for any help!
I've a got a problem when I'd like to embed a YouTube video on my expo application, when I click on the play button, I sometimes get this message :
For example, when I posted this video on reddit, it played perfectly through their youtube embedded player.
I use this sample of code:
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://www.youtube.com/embed/bo_efYhYU2A?rel=0&autoplay=0&showinfo=0&controls=0'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
I know for a fact that the video is allowed to be embedded because when it's not the case, I get a different error message which allows me to open the video on youtube :
Here is a link to test it : https://snack.expo.io/#maxgfr/youtube-embedded
Any help would be greatly appreciated
Maxime
Edit : example of url which doesn't work https://www.youtube.com/embed/8GaWM2a3FAc
To solve this problem :
I create a web application which loads a youtube video thanks to the video ID. My endpoint is something like that : https://mywebsite.com/ID_VIDEO_YOUTUBE
Then in my react native application, I just have to load the URL of my website :
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://mywebsite.com/ID_VIDEO_YOUTUBE'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
Edit : Here is the sample of code that I use in my Vue JS application
<template>
<div style="position: fixed;overflow-y: hidden;overflow-x: hidden;width:100%;height:100%;">
<iframe style="width:100%;height:100%;" :src="'https://www.youtube.com/embed/'+this.$route.params.id+'?&autoplay=1&playsinline=1'" autoplay="1" playsinline="1" frameborder="0" scrolling="no" allow="playsinline; accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</template>
<script>
export default {
name: 'youtube',
head: {
link: [{
r: 'icon',
h: '/static/favicon.png',
t: 'image/png'
}]
}
}
</script>
I am building cross platform application based on PhoneGap.
I am testing this app on iPad, I am using AngularJS.
I have created a list of media files using ng-repeat as below:
<div ng-repeat="media in mediaArray" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
In my list I have images and video files.
I am able to see the list and also able to play the video files.
But problem is that, When I play any of the video then I am not able to scroll the list, scrolling works till I don't play any video once video is played scrolling does not work at all. what can be the issue?
Try this
<div ng-repeat="media in mediaArray" ng-controller="ScrollController" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
Script for controller
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
I want to switch from the old OpenVideoPlayer to JWPlayer 7.3 to get better results on my webcasts. We are using Multibitrate RTMPE stream with Akamai Live secure streaming, but within JWPlayer, I only got the "No playabe sources found" (http://webdiffusion.pjcformation.com/evenement/DetailsTest/71/).
To make it work in OpenVideoPlayer (http://webdiffusion.pjcformation.com/evenement/DetailsTestOpenVideo/71/), we create the token from the Akamai API, put it in a variable, then add it at the end of our streamname (see SMIL file below). We create a dynamic SMIL with the 3 streams (multibitrate) to the url /evenement/smil/71/
Akamai told us it is a player issue and JWPlayer doesn't understand at all our problem
So you, how did you manage the token? Here is our code and the SMIL file:
Javascript
<script type="text/javascript">
var filePathNotEncoded = '/evenement/smil/71/';
var tokenOnly = 'dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD';
var aifp = 'ab345';
var playerInstance = jwplayer("my-video");
playerInstance.setup({
provider: '/assets/client/js/plugins/jwplayer-7.3.6/AkamaiAdvancedJWStreamProvider.swf',
file: filePathNotEncoded,
height: 540,
width: 960,
skin: { name: "vapor" },
primary: "flash",
autostart: true
});
</script>
SMIL:
<smil>
<head>
<meta base="rtmpe://xxxxxxx.live.edgefcs.net/live/" />
</head>
<body>
<switch>
<video src="Streamname_1#sxxxxxx/?auth=dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD&aifp=ab345" system-bitrate="300000" />
<video src="Streamname_2#sxxxxxx/?auth=dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD&aifp=ab345" system-bitrate="800000" />
<video src="Streamname_3#sxxxxxx/?auth=dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD&aifp=ab345" system-bitrate="2400000" />
</switch>
</body>
</smil>
Please help, JWPlayer isn't able to help us and Akamai told us that our code is right (it were working with OpenVideoPlayer from Akamai)
Thanks,
Matt
I have a simple view that I'm using to test out video.js; it looks like this:
<script type="text/javascript" src="~/Scripts/video.js"></script>
<link href="~/Content/video-js.css" rel="stylesheet" type="text/css">
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<body>
<video id="testPlayer" class="video-js" controls preload="auto"
poster="~/Content/images/video-js.png"
data-setup="{}">
<source src="<url of a .mp4 file stored in my project>" type="video/mp4" />
</video>
</body>
After the page loads, I see the poster on the video player (along with some metadata information below the player that I haven't figured out how to get rid of yet). With preload="auto" I see ["Video Error", Object] immediately on page load in the console (using Chrome). If I change auto to none, I get the same non-descript error when I click the player. I cannot figure out what the problem with this error.
There doesn't seem to be any information tucked in the object that shows in the console. The best I could find, as far as description, was something that said media error. I've tried messing around with the encoding of the file a few different ways, but I consistently get the same error.
Does anyone see anything wrong with the view that I am missing (or know what in the world this error could mean)?
When specifying my source URL I was specifying it like this:
src="~/Content/something/place/etc.mp4"
Upon changing that URL to
src='#Url.Content("~Content/you/get/the/point.mp4")'
The video loads fine. I stumbled on some post that mentioned the video tag needing an absolute path, and took a stab trying this.