Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: busted MDB page for video snippet

mark-steven-au premium asked 4 years ago

Expected behavior Play video Actual behavior broken YouTube link in snippet primarily, but then found out autoplay and reload broken Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/jquery/bartek-malanowski/507300

Looking for a way to load a png/jpg in front of MDBIframe or MDBVideo in React as there is no MDB documentation that I can find so far. If not using a YouTube or Vimeo video there is no pre loaded jpg/png so the snippet loads the page and the full video which is not ideal, where I am wanting only a jpg/png to load. If the user then clicks on the jpg with the nice play button on it the video then it plays. This snippet almost gets to that point however it has piece of code allow=autoplay. This is fine unless user decides to stop watching halfway through and either stops or reloads page in which case page stops showing video but starts replaying audio in background. if allow=autoplay is removed video then loads up on click but requires a second click on the now visible play button to get video to play. Is there a way to use either this snippet or better still React Iframe or Video with preloaded jpg/png?

Have taken the snippet and built an all in one page (css etc) plus a jpg preloaded and video as example of the issue here.

enter code here

Material Design Bootstrap .wrapper { position: relative; width: 560px; }

  .wrapper img {
    max-width: 100%;
    height: auto;
  }

  .wrapper iframe {
    display: none;
  }

  .play-btn {
    position: absolute;
    z-index: 666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    border: 0;
  }

  .play-btn:hover {
    cursor: pointer;
  }

  .play-btn:focus {
    outline: 0;
  }
</style>


      <g>
        <path
          d="M101.628,40.092c-8.22-8.22-19.149-12.746-30.774-12.746c-11.624,0-22.553,4.526-30.772,12.746   c-16.968,16.969-16.967,44.578,0.001,61.546c8.22,8.22,19.149,12.747,30.773,12.747s22.553-4.526,30.772-12.746   s12.747-19.148,12.747-30.773S109.848,48.312,101.628,40.092z M100.214,100.225c-7.842,7.842-18.269,12.16-29.358,12.16   s-21.517-4.319-29.359-12.161c-16.188-16.188-16.188-42.529-0.001-58.718c7.842-7.842,18.269-12.16,29.358-12.16   c11.091,0,21.518,4.318,29.36,12.16c7.842,7.843,12.161,18.269,12.161,29.359S108.056,92.382,100.214,100.225z"
          fill="#ffffff"
        />
        <path
          d="M65.893,55.983c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l13.466,13.466L64.478,84.331   c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293L80.065,71.57   c0.391-0.391,0.391-1.023,0-1.414L65.893,55.983z"
          fill="#ffffff"
        />
      </g>
    </svg>
  </button>
</div>

<!-- Start your project here-->

<!-- /Start your project here-->

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

<script type="text/javascript">
  $("#play").on("click", function (e) {
    e.preventDefault();
    $("#player")[0].src += "?autoplay=1";
    $("#player").show();
    $("#video-cover").hide();
    $("#play").hide();
  });
</script>

Blockquote

mark-steven-au premium commented 4 years ago

not sure the page allowed me to upload properly so here is the links to the jpg and video I used for example for this snippet page https://mdbootstrap.com/snippets/jquery/bartek-malanowski/507300

https://snowtv-converted-public.s3-ap-southeast-2.amazonaws.com/assets/brittCox/thumbnail/Bcox.jpg

https://snowtv-converted-public.s3-ap-southeast-2.amazonaws.com/assets/brittCox/h264/britt.mp4

Grzegorz Bujański staff commented 4 years ago

Hi. Are you using MDB jQuery or MDB React?

mark-steven-au premium commented 4 years ago

Im using React so yes looking for a way to add a thumbnail in front of MDB Video player or use other means if not possible with MDB.

But your page is broken on Apple Safari (13.1) Fine on Chrome, Opera, Firefox Brave just not Safari. Seems to load properly but when you click on video it throws error and stops. Hope that helps

Grzegorz Bujański staff commented 4 years ago

It looks like the problem is only with this movie. After inserting another video from youtube it works fine.

mark-steven-au premium commented 4 years ago

No the point is I want to be able to pull videos NOT from YouTube, or Vimeo either for that matter. A direct video call was the object.

Grzegorz Bujański staff commented 4 years ago

How can I reproduce this issue? Can you show me your code?

mark-steven-au premium commented 4 years ago

Hi Grzegorz, There are 2 distinct things one in jquery and the other in React 1 Goto https://mdbootstrap.com/snippets/jquery/bartek-malanowski/507300 and view in Safari (works fine in other browsers) This does not work in Safari and thought you should know so it can be looked at. Catalina Safari Version 13.1

2 As far as the video playing it is the MDB Video found here. There are 2 issues here.

https://mdbootstrap.com/docs/react/utilities/embeds/ It shows a download link in the video when controls are active. I would like to be able to get rid of the download icon.

this is a link to simple video file, not a YouTube or Vimeo video that I am using to test. https://snowtv-converted-public.s3-ap-southeast-2.amazonaws.com/assets/brittCox/h264/britt.mp4

MDB Video Iframe or MDB Video Player works well auto sizing etc except for the download icon. Plus there does not appear to be a load thumbnail in the API anywhere which is what I would like to happen so that the video only loads if a user clicks on it. Currently both of the MDB video components loads up the video in the background. I can get around it by using straight bootstrap and adding a thumbnail that way but figured MDB had a better way of doing it that was not documented.

Hope that helps.

Grzegorz Bujański staff commented 4 years ago

Unfortunately, we don't have other ready solutions.

  1. as i say above - the problem is with this one movie. I added other movies and everything works.
  2. Unfortunately, when it comes to solutions related to react, you need to set up a separate thread and select the appropriate category. It looks like you need to add '? autoplay = false' to the link and instead of adding in js, delete the autoplay fragment. I try use download button, and work fine for me.

mark-steven-au premium commented 4 years ago

Hi Grzegorz, Thanks for that I will give it a go and see what result is. Thanks for your help Mark

Grzegorz Bujański staff commented 4 years ago

You're welcome.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Opened

Specification of the issue
  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.19.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
mark-steven-au
Premium support 542Support score
27Questions 42Answers 3Snippets