I would like to set start time for my mp4 video. I know I can use something like that when I am using youtube video, but I have no idea if there is a way to this with classic mp4 video
<ReactPlayer
url={config.url}
controls
onPause={() => console.log("Pause")}
config={{
youtube: {
playerVars: {
start: 30,
},
},
}}
/>;
Related
I'm trying to add a Lottie animation JSON file to my RN application that is built using Expo, and being tested on iphone SE 2022 with iOS 15.6.1.
I'm using Lottie-react-native for that purpose, but all I can see is an empty square in the size of the width and height I set on the Lottie style prop. nothing more. no animation, no static image. nothing.
Tried looking for more people that are having that issue, but couldn't find any so I guess I'm implementing it wrong or missing something.
Those are my relevant dependencies and versions:
"lottie-react-native": "^5.1.4",
"expo": "~46.0.9",
"react": "18.0.0",
"react-native": "0.69.6",
and this is the relevant parts of the code I currently have:
const lottieAnimationRef = useRef<LottieView>(null);
const [lottieSpeed, setLottieSpeed] = React.useState<number>(1);
useEffect(() => {
setLottieSpeed(0.9);
if (lottieAnimationRef.current) {
lottieAnimationRef.current.play();
setTimeout(() => {
setLottieSpeed(1);
}, 250);
}
}, [lottieAnimationRef.current]);
<View style={{backgroundColor: 'yellow', height: 200, width: 200}}>
<LottieView
source={require('../../assets/lotties/check.json')}
ref={lottieAnimationRef}
loop={true}
speed={lottieSpeed}
style={{flex: 1, width: 200, height: 200, alignSelf: 'center'}}
renderMode={"SOFTWARE"}
onLayout={() => console.log("onLayout")}
onAnimationFinish={() => console.log("onAnimationFinish")}
onAnimationLoop={() => console.log("onAnimationLoop")}
/>
</View>
As mentioned above, I only see a yellow 200x200 px square, with noting in it. The only event that prints is onLayout.
Already tried all renderModes, and triple-checked the path to the file... none of those are the issue here...
Any help would be super appreciated.
I have integrated React-player https://www.npmjs.com/package/react-player and want to track the video. I have configured it as
<ReactPlayer
width={'100%'}
height={'auto'}
url={`${videosCollection[selectedVideoId]?.url+videoResolution}.mp4`}
controls
ref={playeref}
playing
config={{
file:{
tracks: [
{ **kind: 'subtitles'**, src: '/subs/introduction.vtt', srcLang: 'en', default: true, label:'Locations'}
// The same code snipet is working for **kind: 'subtitles'**
]
}
}}
/>
It's working perfect for subtitles but not for chapters
I have been using react-native video player in order to show video, until video loads I want to display thumbnail so I am using react-native-create-thumbnail to generate thumbnail from video
createThumbnail({
url: video.path,
timeStamp: 10000,
})
.then(response => {
console.log('thumbnail',response)
thumbnailUrl=response.path;
}
)
.catch(err => console.log('thumbnail err',err));
here I get the following object
thumbnail {"height": 300, "path": "file:///data/user/0/com.sheolife/cache/thumbnails/thumb-4b75eaad-2afe-4c3d-994d-3f6206ce5b75.jpeg", "width": 300}
when I add the above thumbnailUrl inside my Videoplayer thumbnail prop, it is still showing black
I try added as below
<VideoPlayer
ref={videoplayerref}
video={{
uri: video
}}
paused={paused}
videoWidth={Dimensions.get("window").width}
videoHeight={400}
thumbnail={{uri:thumbnailUrl}}
resizeMode="contain"
pauseOnPress
// hideControlsOnStart
onStart={(state) => onStart(state)}
onPlayPress={(state) => onPlayPress(state)}
hideControlsOnStart={true}
/>
now here the thumbnailUrl is local file so I thought to write it as follows:
thumbnail={require(`${thumbnailUrl}`)}
but this too is throwing error, could anyone please help me out here, how do I access my thumbnailpath inside videoplayer?
Any leads would be great.
A few days ago, I bought a Gatsby blog theme and tried to modify it. The blog site uses Images(PNG, JPEG), not animated GIFs. So I tried to use GIF images for all blog posts but it affected site performance.
Also, I notice that Gatsby Image doesn't provide a GIF format. How can I use GIF on my blog with high performance?
You can convert GIFs into MP4 videos with H.264 encoding using ffmpeg. Then use <video src="..." /> in place of your img tag. To make this really easy, I have a React component that I use for this that includes automatic playback when the video is visible:
import React, { useEffect } from "react"
import PropTypes from "prop-types"
import { useInView } from "react-intersection-observer"
const GifVideo = ({ threshold = 0.15, ...playerProps }) => {
const [ref, inView] = useInView({ threshold })
useEffect(() => {
if (inView) {
ref.current?.play()
} else {
ref.current?.pause()
}
}, [ref, inView])
return <video ref={ref} autoPlay playsInline muted loop {...playerProps} />
}
export default GifVideo
GifVideo.propTypes = {
src: PropTypes.string,
threshold: PropTypes.number,
className: PropTypes.string,
}
Then to you use it, it's this easy:
<GifVideo src="/your/video.mp4" width={400} className="some-class" />
For what it's worth, I don't recommend using the sharp-backed GraphQL image transformers in Gatsby (gatsby-transformer-sharp). It's exceedingly slow, couples the presentation to the query, and doesn't provide any way to handle art direction.
I use gatsby-remark-interactive-gifs plugin to show gifs on my gatsby blog.
Install gatsby-remark-interactive-gifs
npm install --save gatsby-remark-interactive-gifs
yarn add gatsby-remark-interactive-gifs
Add this config to gatsby-config.js:
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-interactive-gifs`,
options: {
root: `${__dirname}`,
src: `${__dirname}/content/gif`,
dest: `${__dirname}/public/static/gifs`,
play: `${__dirname}/src/img/play.gif`,
placeholder: `${__dirname}/src/img/play.gif`,
loading: `${__dirname}/src/img/play.gif`,
relativePath: `/static/gifs`,
},
},
],
},
},
From plugin document:
root - The root of your project.
src - Where all the gifs you want processed are stored. Absolute path.
dest - A path in public where your gifs are stored. Absolute path.
play - An image to indicate that the gif can be interacted with. Absolute path.
placeholder - An image to show when the gif is missing in action. Absolute path.
loading - An image which shows when the gif is downloading. Absolute path.
relativePath - The relative path served from public/.
! Make sure you are adding this above the prismjs config.
Sample code in MD file to show gifs on your gatsby blog:
<img src="/static/gifs/fileName.gif">
I want to show a video which starts to run automatically and loops infinitely in my adobe portfolio website. I tried using YouTube embedded video with autoplay and loop options (see below code), however, every time the video ends there is a black refresh screen before it starts again which ruins the appearance of my website. The video format I'm using is .mp4. I know that with .gif file this problem can be solved, however, the video quality will not be sufficient. I tried downloading the video into the portfolio website directly, however, I couldn't make it loop or autoplay.
I would appreciate your help in this matter.
Thanks, Tal
The code:
<iframe width="1920" height="1080"
src="https://www.youtube.com/embed/youtubelink?rel=0&autoplay=1&controls=0&loop=1&playlist=youtubelink&controls=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
After some research I've finally got it working, the solution is to use the API iframe embed code (https://developers.google.com/youtube/iframe_api_reference) and instead of using the loop parameter you make use of the onPlayerStateChange function. Here is a code example:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: '<?php the_field('homepage_video_background_id'); ?>',
playerVars: {
modestbranding: 0,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 0,
origin: window.location.origin
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
</script>
This method still flashes an instant black screen before restarting the video. If you need a smoother loop use this;
'onStateChange': function (event) {
var YTP=event.target;
if(event.data===1){
var remains=YTP.getDuration() - YTP.getCurrentTime();
if(this.rewindTO)
clearTimeout(this.rewindTO);
this.rewindTO=setTimeout(function(){
YTP.seekTo(0);
},(remains-0.1)*1000);
}
}
I'm trying to figure out this problem myself. I'm currently using Adobe Portfolio.
Are we allow to add code within the Embed box?