<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>mediaelement.js sample</title> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" /> <script src="http://blog.alt-scape.com/js/mediaelement_js/build/jquery.js"></script> <script src="http://blog.alt-scape.com/js/mediaelement_js/build/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="http://blog.alt-scape.com/js/mediaelement_js/build/mediaelementplayer.css" /> <style> body { margin:20px; padding:0px; text-align:center; } </style> </head> <body> <div style="width:320px; margin:0px auto;"> <!-- Multiple codecs with Flash fallback --> <video id="player" width="320" height="240" poster="http://blog.alt-scape.com/js/mediaelement_js/media/html5video.jpg" controls="controls" preload="none"> <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> <source type="video/mp4" src="http://blog.alt-scape.com/js/mediaelement_js/media/html5video.mp4" /> <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> <source type="video/webm" src="http://blog.alt-scape.com/js/mediaelement_js/media/html5video.webm" /> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="http://blog.alt-scape.com/js/mediaelement_js/media/html5video.theora.ogv" /> <!-- Flash fallback for non-HTML5 browsers without JavaScript --> <object width="320" height="240" type="application/x-shockwave-flash" data="build/flashmediaelement.swf"> <param name="movie" value="http://blog.alt-scape.com/js/mediaelement_js/build/flashmediaelement.swf" /> <param name="flashvars" value="controls=true&poster=http://blog.alt-scape.com/js/mediaelement_js/media/html5video.jpg&file=http://blog.alt-scape.com/js/mediaelement_js/media/html5video.mp4" /> <!-- Image as a last resort --> <img src="http://blog.alt-scape.com/js/mediaelement_js/media/html5video.jpg" width="320" height="240" title="" /> </object> </video> </div> <script> // jQuery method $('video').mediaelementplayer(); // normal JavaScript var player = new MediaElementPlayer('#player'); </script> </body> </html>