Skip to content

Instantly share code, notes, and snippets.

@garryyao

garryyao/video-source-fallback.html

Created September 18, 2015 02:32
Show Gist options
  • Save garryyao/27d3437bd53d61784207 to your computer and use it in GitHub Desktop.
Save garryyao/27d3437bd53d61784207 to your computer and use it in GitHub Desktop.
Download ZIP
Test video source fallback in HTML5
Raw
video-source-fallback.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>EFSET Tutorial Videos</title>
<link rel="stylesheet" type="text/css" href="bower_components/mediaelement/build/mediaelementplayer.min.css" media="all">
<link rel="stylesheet" type="text/css" href="bower_components/mediaelement/build/mejs-skins.css" media="all">
<!-- build:js videoplayer.js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/mediaelement/build/mediaelement-and-player.min.js"></script>
<script src="bower_components/uri.js/src/URI.min.js"></script>
<!-- endbuild -->
<style>
/* video vertical align center*/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
/* proportional video size */
.mejs-container {
width: 100vw !important;
height: 56vw !important;
}
video {
width: 100% !important;
height: 100% !important;
}
</style>
</head>
<body>
<video id="player" controls autoplay>
<source src="https://pdlvimeocdn-a.akamaihd.net/25783/394/398662307.mp4?token2=1442550450_2f6666fb0db966862eb14ff09a0937be&aksessionid=6ae4bef545a099ff" type="video/mp4">
<source src="https://dn-ef.qbox.me/1_AddtoLinkedin_Chinesesubtitles.mp4" type="video/mp4">
</video>
<script>
$(function ($) {
var width = $(window).width();
var height = width * .56;
var player = new MediaElementPlayer('#player', {videoWidth: width, videoHeight: height});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment