Video Card Player

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Video Card Player

mark-steven-au pro premium asked 5 years ago

Expected behavior Play video but not be able to download video or at least not have an easy link Actual behavior Video player works great for a local video. However the documentation on the video controls is a bit lacking for control.

https://mdbootstrap.com/docs/react/components/cards/#docsTabsAPI

Only thing I was able to find was this page showing you how to add things like play full screen etc. not much about being able to put the play controls up a bit better. The big problem though is that down bottom right is a three small dots. Clicking on these dots gives you the option to play video picture in picture and download. How do I turn off this download feature please? Thanks in advance. Code is below

menu showing a download button Resources (screenshots, code snippets etc.) import React, { Component } from 'react'; import { MDBContainer, MDBCol, MDBRow, MDBCard, MDBCardUp, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBAvatar, MDBRotatingCard, MDBIcon, MDBBtn, MDBCardVideo, } from 'mdbreact';

import DocsLink from '../components/docsLink'; import SectionContainer from '../components/sectionContainer';

class CardPage extends Component { state = { flipped: false };

handleFlipping = () => { const { flipped } = this.state; this.setState({ flipped: !flipped }); };

render() { const { flipped } = this.state; const colStyle = { maxWidth: '22rem' };

return (
  <MDBContainer>

    <MDBCard>
        <MDBCardVideo allowfullscreen
        style={{color:"red"}}
        onMouseOver={this.handleEvent}
        id="myID"
          src='/videos/britt.mp4'
          ratio='16by9'
        />
        <MDBCardBody>
          <MDBCardTitle tag='h5'>Name</MDBCardTitle>
          <MDBCardText>
            Name
          </MDBCardText>
          <MDBBtn color='primary' size='sm'>
            read more
          </MDBBtn>
        </MDBCardBody>
      </MDBCard>

  </MDBContainer>
);

} }

export default CardPage;

enter image description here

Jakub Chmura staff premium answered 5 years ago

Hi @mark-steven-au,

The MDBCardVideo it's the only wrapper with additional styles and some extra properties. Our component uses an internal browser video player so you need to search extra functions on the browser documentation.

I found the information in Chrome documentation page that you need to set properties

controlsList="nodownload"

Please tell me if my solution will work in your case.

Best, Kuba

mark-steven-au pro premium answered 5 years ago

Hi Kuba, Thanks for doing this search but unfortunately it did not work. I thought the player was a MDB player so controls were in the java script somewhere but it seems to be more about Chrome then is it? Either way it unfortunately did not work and worse still I tested in Safari and got a tiny thumbnail "see screen grab" was fine in Firefox, Opera, Brave and Chrome in this regard. In one of the posts from MBD (cannot find it now) It mend you were releasing a new MDB Video Player. Any idea of when this is as cannot find any reference to in now. Regards Mark

Safari screen shot of player

Code for player

Jakub Chmura staff premium commented 5 years ago

HI @Jakub Chmura,

Just as you say, the player is provided by the browser publisher. We only provide a styled wrapper for the iframe and video tags. Unfortunately, I can't help you because these errors seem to be independent of the MDB package. I can only add a task to thoroughly analyze the problem and check if we are able to fix these errors with changes in the MDBReact package. We will try to accomplish this task with high priority.

Best, Kuba

mark-steven-au pro premium commented 5 years ago

Hi Kuba, Any updates on the new Video Player that was highlighted a few months ago?

Jakub Chmura staff premium commented 5 years ago

Hi @mark-steven-au,

We cannot solve this problem, it is a problem with a video player that is not under MDB maintenance. As I mentioned earlier, our video component it's not a player, it is only an HTML iframe wrapper that has its own material design styles. We do not provide support from the video player, and the one described by you seems to be such an error. I tested this component with a video link and a video file on my environment and I could not reproduce your problem, which seems to confirmed that your problem is independent of us.

The only thing I can do about this is to ask for a video file that causes this error and will do a component test based on the file provided.

Best, Kuba

mark-steven-au pro premium commented 5 years ago

Hi Kuba,See if this one does it for you. Everything else works perfect. EG play button, speaker icon, full frame just the pesky triple dot that allows picture in picture and download. OK with pic in pic just would like to get rid of download somehow. https://snowtv-converted-public.s3-ap-southeast-2.amazonaws.com/assets/4bfd72ba-16de-4283-be26-c8a905dc8f5f/h264/4bfd72ba-16de-4283-be26-c8a905dc8f5f.mp4

Jakub Chmura staff premium commented 5 years ago

Ok, I see the problem and it can be improved/solved from the MDB side. We're gonna try to fix it as soon as possible, but for the moment we have another big task with high priority, and we're gonna try to fix it as soon as possible.

Best, Kuba

Jakub Chmura staff premium commented 5 years ago

Ok, I see the problem and it can be improved/solved from the MDB side. We're gonna try to fix it as soon as possible, but for the moment we have another big task with high priority.

Best, Kuba

mark-steven-au pro premium commented 5 years ago

excellent look forward to it

mark-steven-au pro premium commented 5 years ago

Hi Jacob Any updates on this one? Regards Mark

Jakub Chmura staff premium commented 5 years ago

We didn't fix it yet.

The next possible release date is in 2 weeks but I can't promise that we publish a new version. As I said before we have a very big task with very high priority. After we finish it we will be able to fix your issue.

Best, Kuba

mark-steven-au pro premium commented 5 years ago

Hi Kuba, Just touching base to see if there was any progress on the video player or should I start looking elsewhere for video players? I'm needing to finish project that involves video so need a resolution soon. No pressure as I know you guys have a big project on.

Jakub Chmura staff premium commented 5 years ago

Hi @mark-steven-au,

We haven't started fixing this error yet. Sorry about that. Maybe try to use an HTML video tag instead of MDBCardVideo component and assign it, classes, from the MDBCardVideo component.

Best, Kuba

mark-steven-au pro premium commented 5 years ago

Hi Kuba, Thanks for that

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.26.0
  • Device: Mac
  • Browser: Chrome
  • OS: IOS
  • Provided sample code: No
  • Provided link: Yes
Tags
download video card
Related topics
2
Pro account
1
Download Templates
1
CSS not applied
1
Use of Mdb Pro
1
Multiple Cards using *ngFor
About author
mark-steven-au
Pro User Premium support
542Support score
27Questions 42Answers
0Snippets likes 3Snippets