The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Video styles in Bootstrap

Neil Pollock
Topic Author
Offline
Premium Member

9 years 1 month ago #4599 by Neil Pollock

Video styles in Bootstrap was created by Neil Pollock

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.

Fay
Offline
Elite Member

9 years 1 month ago #4600 by Fay

Replied by Fay on topic Video styles in Bootstrap

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.

Neil Pollock
Topic Author
Offline
Premium Member

9 years 3 weeks ago #4611 by Neil Pollock

Replied by Neil Pollock on topic Video styles in Bootstrap

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:

Code:

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

Becomes this:

Code:

<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.

Neil Pollock
Topic Author
Offline
Premium Member

8 years 10 months ago #4682 by Neil Pollock

Replied by Neil Pollock on topic Video styles in Bootstrap

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.

Fay
Offline
Elite Member

8 years 10 months ago #4685 by Fay

Replied by Fay on topic Video styles in Bootstrap

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:

Code:

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.

Neil Pollock
Topic Author
Offline
Premium Member

8 years 8 months ago #4836 by Neil Pollock

Replied by Neil Pollock on topic Video styles in Bootstrap

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.

Moderators: JohnSmith

Time to create page: 0.133 seconds

Video styles in Bootstrap

Main Pages

Quick Links

Support

External resources