Topic: busted MDB page for video snippet
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes
mark-steven-au pro premium commented 5 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 5 years ago
Hi. Are you using MDB jQuery or MDB React?
mark-steven-au pro premium commented 5 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 5 years ago
It looks like the problem is only with this movie. After inserting another video from youtube it works fine.
mark-steven-au pro premium commented 5 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 5 years ago
How can I reproduce this issue? Can you show me your code?
mark-steven-au pro premium commented 5 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 5 years ago
Unfortunately, we don't have other ready solutions.
mark-steven-au pro premium commented 5 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 5 years ago
You're welcome.