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.
Related
I have a couple objects created using the React-Quill editor and some contain images while others contain videos. The ones containing images are rendered back in my app without issue but the ones with videos end up rendering while ignoring all video tags.
For example this is one set of data:
<p>Some text</p><video class="quill-upload-video" src="https://res.cloudinary.com/hidden-bucket/video/upload/v1670504722/InspirationMedia/hvnctjls3jpglucerfso.mov" controls="true" controlslist="nodownload" width="100%"></video><p>Some more text</p>
Quill renders both paragraph tags and absolutely ignores the video tag as though it isn't there. This is not an issue for images.
Is there an explanation for this? How can I troubleshoot the problem?
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}/>
How can I show featured image in reactJS? I'm using Rest API with ReactJS. I had fetch every content. In the console, I can watch the featured_media value. How can I retrieve it in my reactJS image component?
You can use the following code to get the featured image.
_embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url
here is an example:
this.state.posts.map(post=>
<img
alt="example"
src={post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url}
/>
)
you will get more idea from here : https://github.com/BRdhanani/headless-wordpress-with-react
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 am using Ionic2 slider which is using the Swiper under the hood. I have built a carousel that shows 3 at a time but I would like the fourth slide to show partly so the user knows there is more slides (can't use pagination dots). I can't see any configuration (either on Ionic API or Swiper API) to achieve. Is anyone aware of a configuration or a "non-hacky" way of achieving this. I have attached screenshot of what the design is suppose to look.
Try something like this in the template ...
<ion-slides [options]="sliderOptions"> ... <
And in your .ts class ...
export class ClassWithSlider {
// slider options
sliderOptions = {
slidesPerView:4,
centeredSlides:true
};
}
The reference for the options can be found here, in section Swiper Parameters.