Video Card Player

web
mobile

Topic: Video Card Player

mark-steven-au pro premium asked 3 weeks 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 3 weeks 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 2 weeks 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 2 weeks 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 3 days ago

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


Jakub Chmura staff premium commented 22 hours 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 8 hours 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 40 minutes 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 40 minutes 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.26.0
  • Device: Mac
  • Browser: Chrome
  • OS: IOS
  • Provided sample code: No
  • Provided link: Yes