Reply To: HTML5 Video on Revolution Slider With Controls Play and Pause

#10001123
Support
Keymaster

Hello, here’s the sample HTML markup for a HTML5 video with controls:

<div class="slider-container">
	<div class="slider" id="revolutionSlider" data-plugin-options='{"startheight": 495}'>
		<ul>							
		
			<li data-transition="fade" data-slotamount="13" data-masterspeed="300" >

				<img src="img/slides/black.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="" />

				<div class="tp-caption sft customout fullscreenvideo"
					data-x="center" data-hoffset="134"
					data-y="center" data-voffset="-6"
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1000"
					data-easing="Power4.easeOut"
					data-endspeed="500"
					data-endeasing="Power4.easeOut"
					data-autoplay="true"
					data-autoplayonlyfirsttime="true"
					data-nextslideatend="true">

					<video class="video-js vjs-default-skin" preload="none" loop  controls width="100%" height="100%"
						  poster="http://video-js.zencoder.com/oceans-clip.png"
						  data-setup="{}">
						<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
						<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
						<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
						<track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
					  </video>
					
				</div>

			</li>
		</ul>
	</div>
</div>