I'm trying to put videos with react, when I host the page locally I can rewind and fast forward the video, but when I deployed the project on CI Gitlab, I can't rewind or fast forward using the video bar.
I'm using the react-player library
<ReactPlayer url={ video }
playing="false"
controls="true"
/>
I don't know if I'm mising some parameters in this tag.
true" and "false" isn't exactly boolean in JS. I think you meant to type true and false without the quotation marks.
Therefore, to solve your problem, your code should be:
<ReactPlayer url={ video }
playing={false}
controls={true}/>
Related
What’s the most efficient way to check if a file is an Img/video. And then upload the appropriate tag in react?
I’m not aware of an “does everything” tag in react…so would I have to use a if/else check and then use an image or video tag?
Note: could be muliptle versions of a image(jpg/png/webp)
1-Use this link to get the extension of the file:
How can I get file extensions with JavaScript?
2-define 2 states (imageFile and videoFile) and set the states to indicate whether you have an image or a video:
if (extension==="jpg" ||
extention==="png"){
setImageFile(true)
}
3- Do conditional rendering like below:
<div>
{imageFile && <img>{file}</img>}
{videoFile && <video>{file}</video>}
</div>
I am currently using Next.JS to create a static website with the main objective to have a very good SEO-optimized website.
Everything works fine and the website is correctly deployed with Vercel, but I have noticed that part of the content is not present directly in the HTML files.
For instance, I have a component that loops over an array of data, using the array map method, like this:
{imageTexts.map((image) => (
<ImageText
key={image.title + 'TitleImage'}
title={image.title}
description={image.description}
size={imagesSize}
image={image.image}
/>
))}
Once the website is deployed to Vercel, I search inside the HTML file for the information/strings contained in the array of data (imageTexts), but I can't find them. I guess Next.JS uses javascript to target some sort of div and then loops over its own JSON file to dynamically display content.
For me, this seems to kill a lot of the SEO advantage that static websites have over SPA. Is there any way I can have those strings directly inside my HTML files?
I am still not 100% sure this is caused by the map method, but I don't find any other explanations. Especially because other dynamically loaded components don't have the same problem. For example, this component string can be found on the HTML file, without a problem:
{title ? (
<Text
type="h2"
textAlign="center"
>
{title}
</Text>
) : null}
If you are mapping over ImageTexts on the server and that component renders HTML tags, then that HTML should be sent on the first-page load, and you could see it if you do CTRL+U or disable javascript.
Ok, I have just found that the reason. It has nothing to do with the map method. I was actually using the <Remark> component from library called react-remark. It seems it does not play well with Next.JS
I want to create a videoplayer in a browser, and be able to switch the source of the video.
All the video's are stored on the computer.
I am trying to use VideoJS, an i got it working for 1 video, but i cannot get it to switch to a different video.
I would like to open an video from a location, for instance using:
<input type="file" id="files">
This would be the source for the player.
The source of the videojs is as follows, where i cannot use a variable.
<source src="video/example.mp4" type='video/mp4'>
Anybody an idea?
I am fairly new to HTML5 and Javascript, and i don't know which termonolgy to use to find the answers.
First you get the instance of your player and then you set a new source (or new sources) via the Player.src function:
var player = videojs('my-player');
player.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
For more detailed information, have a look at the documentation of Player.src.
I'm building my website using React and have multiple images to display. After running an audit using the Google Chrome audit function, I've been getting the "Serve images in next-gen formats" opportunity message.
After reading about the various formats (WebP, JPEG2000, JPEGXR), it seems each is supported on only select browsers. For instance, I can't just convert all of my images to WebP because they won't show up on the Safari browser. So my issue is how to I "serve" each type of image depending on the browser being used? This is what I've tried:
I have 3 types of files, jpg, JPEG2000, and WebP. Each is being imported like:
import Imagejpg from './path/image.jpg'
import ImageJPEG2000 from './path/image.JPEG2000'
import ImageWebP from './path/image.webp'
Then in my class, I have an object array that contains the images. To use the images:
<picture>
<source>
srcSet={`
${project.Imagejpg},
${project.ImageJPEG2000},
${project.ImageWebP},
</source>
<img src={project.imageWebP} alt=""/>
</picture>
Now, if I only use the jpg image, it works fine on all browsers as most browsers can use jpg. But I'm trying to optimize my site and use the better types of image files. Is there a way to use the several types of files or is there something I am missing?
The solution is indeed in the <picture> element, but using multiple sources.
The code with correct syntax looks like this:
<picture>
<source srcSet={project.ImageWebP} type="image/webp" />
<source srcSet={project.ImageJPEG2000} type="image/jp2" />
<source srcSet={project.Imagejpg} type="image/jpeg" />
<img src={project.Imagejpg} alt="" />
</picture>
Explanation
Seeing the picture element, a browser will download the first source it can support. If it's an old browser that doesn't support <picture> at all, it will fall back to the <img /> tag which has a jpeg source.
This is a quick and easy win to improve your page's speed. The tiny overhead in extra HTML bytes does not negate the speed improvements except in extreme scenarios, like very small and simple images.
I am designing media player in reactjs web but the actual look that the media player used to have, I am not getting that look. What changes should I make in the below code?
<Player ref="player"
poster='https://media.w3.org/2010/05/sintel/poster.png'
src="https://media.w3.org/2010/05/sintel/trailer.mp4"
fluid="false"
width="2px"
height="2px"
preload="auto"
aspectRatio="9:9"
>
<ControlBar autoHide={false}>
<ForwardControl seconds={5} order={3.1}/>
</ControlBar>
</Player>
There are no icons here in the player
I myself have corrected this issue.
There is a need to import css file found at '../node-modules/video-react/dist/video-react.css' in main react file.