Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Main Forum
Developers
Video styles in Bootstrap
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC:

Video styles in Bootstrap 6 years 9 months ago #4599

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
I'm trying to apply my own video styles in a Bootstrap template, but for some reason this template inserts a whole load of code (mejs-container, mejs-inner, mejs-mediaelement etc.) which overrides what I want to do.

Here is an example of what I'm trying to do, in a XOT object (see page 3 and onwards): xerte.cardiff.ac.uk/play_4089

Here is what it looks like in Bootstrap: xerte.cardiff.ac.uk/play_4414

How can I stop all of these mejs classes from being applied?

Please Log in or Create an account to join the conversation.

Video styles in Bootstrap 6 years 9 months ago #4600

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 235
  • Thank you received: 87
The XOT & Bootstrap templates both use mediaelement.js to play videos (www.mediaelementjs.com/) so that's where all the extra divs etc are coming from.

I'm not sure why what you've used to get around this in the XOT template hasn't worked in the bootstrap one though. Could you just identify all the bits from mediaelement that you don't want and hide them?

Fay

Please Log in or Create an account to join the conversation.

Video styles in Bootstrap 6 years 8 months ago #4611

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
With the amount of code that gets added and modified by mediaelements.js I don't think it would be possible to simply hide the bits I don't want.

For example, this code:
<video>
    <source src="https://xerte.cardiff.ac.uk/USER-FILES/5974-sisnp2-site/media/finding_your_library.mp4" />
</video>

Becomes this:
<div class="mejs-container mejs-video" id="mep_1" style="width: 1024px; height: 768px;">
		<div class="mejs-inner">
			<div class="mejs-mediaelement">
				<video height="768" src="https://xerte.cardiff.ac.uk/USER-FILES/5974-sisnp2-site/media/finding_your_library.mp4" width="1024"><source src="https://xerte.cardiff.ac.uk/USER-FILES/5974-sisnp2-site/media/finding_your_library.mp4"></video>
			</div>
			<div class="mejs-layers">
				<div class="mejs-poster mejs-layer" style="display: none; width: 1024px; height: 768px;"></div>
				<div class="mejs-overlay mejs-layer" style="width: 1024px; height: 768px; display: none;">
					<div class="mejs-overlay-loading">
						<span></span>
					</div>
				</div>
				<div class="mejs-overlay mejs-layer" style="display: none; width: 1024px; height: 768px;">
					<div class="mejs-overlay-error"></div>
				</div>
				<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 1024px; height: 768px;">
					<div class="mejs-overlay-button"></div>
				</div>
			</div>
			<div class="mejs-controls" style="display: block; visibility: hidden;">
				<div class="mejs-button mejs-playpause-button mejs-play">
					<button aria-controls="mep_1" title="Play/Pause" type="button"></button>
				</div>
				<div class="mejs-time mejs-currenttime-container">
					<span class="mejs-currenttime">00:00</span>
				</div>
				<div class="mejs-time-rail" style="width: 875px;">
					<span class="mejs-time-total" style="width: 865px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded" style="width: 525.504px;"></span><span class="mejs-time-current" style="width: 0px;"></span><span class="mejs-time-handle" style="left: -7px;"></span><span class="mejs-time-float"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span>
				</div>
				<div class="mejs-time mejs-duration-container">
					<span class="mejs-duration">00:26</span>
				</div>
				<div class="mejs-button mejs-volume-button mejs-mute">
					<button aria-controls="mep_1" title="Mute Toggle" type="button"></button>
					<div class="mejs-volume-slider">
						<div class="mejs-volume-total"></div>
						<div class="mejs-volume-current" style="height: 80px; top: 20px;"></div>
						<div class="mejs-volume-handle" style="top: 17px;"></div>
					</div>
				</div>
				<div class="mejs-button mejs-fullscreen-button">
					<button aria-controls="mep_1" title="Fullscreen" type="button"></button>
				</div>
			</div>
			<div class="mejs-clear"></div>
		</div>
	</div>

Please Log in or Create an account to join the conversation.

Video styles in Bootstrap 6 years 6 months ago #4682

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
Does anyone have a possible fix for this?

I have a fairly urgent need to use the <video> and <audio> tags in a Bootstrap project, but don't want these converted to the Media Elements player (as seems to be happening at the moment).

Please Log in or Create an account to join the conversation.

Video styles in Bootstrap 6 years 6 months ago #4685

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 235
  • Thank you received: 87
It looks like there's a function in the template that forces all audio & video tags to use the mediaelement player. You can override this by including the Script optional property with this in it:
function initMedia(){}

I just see the browser's default player when I add this.
The following user(s) said Thank You: Neil Pollock

Please Log in or Create an account to join the conversation.

Video styles in Bootstrap 6 years 4 months ago #4836

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
Forgot to say thanks for this fix.

If you're interested, the fix was needed for all of the audio players on the "Talks" page in this resource: xerte.cardiff.ac.uk/play_5767

Please Log in or Create an account to join the conversation.
  • Page:
  • 1
Moderators: JohnSmith
Main Forum
Developers
Video styles in Bootstrap
Time to create page: 0.057 seconds
Main Pages
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search