github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/abplayer/index.html (about) 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 6 <title>ABPlayerHTML5 by Jabbany</title> 7 <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css"> 8 <link rel="stylesheet" href="css/ext/styles.css"> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <link rel="stylesheet" href="css/base.min.css?1" /> 11 <script src="js/CommentCoreLibrary.min.js"></script> 12 <script src="js/ABPlayer.min.js"></script> 13 <script type="text/javascript"> 14 var $_ = function(e){return document.getElementById(e);}; 15 window.addEventListener("load",function(){ 16 $_("click-load").addEventListener("click", function(e){ 17 if(e && e.preventDefault) 18 e.preventDefault(); 19 var inst = ABP.create(document.getElementById("load-player"), { 20 "src":{ 21 "playlist":[ 22 { 23 "video":document.getElementById("video-1"), 24 "comments":"comment-otsukimi.xml" 25 }, 26 { 27 "video":document.getElementById("video-2"), 28 "comments":"comment-science.xml" 29 } 30 ] 31 }, 32 "width":800, 33 "height":522 34 }); 35 $_("click-load").style.display= "none"; 36 }); 37 }); 38 </script> 39 </head> 40 <body> 41 42 <div id="header"> 43 <nav> 44 <li class="fork"><a href="https://github.com/jabbany/ABPlayerHTML5">Fork On GitHub</a></li> 45 <li class="downloads"><a href="https://github.com/jabbany/ABPlayerHTML5/zipball/master">ZIP</a></li> 46 <li class="downloads"><a href="https://github.com/jabbany/ABPlayerHTML5/tarball/master">TAR</a></li> 47 <li class="downloads"><a href="demo.html">Demo</a></li> 48 <li class="title">DOWNLOADS / 下载</li> 49 </nav> 50 </div><!-- end header --> 51 52 <div class="wrapper"> 53 54 <section> 55 <div id="title"> 56 <h1>ABPlayerHTML5</h1> 57 58 <p>一个可扩展的弹幕播放器的HTML5实现范例</p> 59 <span class="credits left">Project maintained by / 维护者: <a href="https://github.com/jabbany">jabbany</a></span> 60 <span class="credits right">Theme Author / 介绍页面主题作者: <a href="http://twitter.com/#!/michigangraham">mattgraham</a></span> 61 </div> 62 63 <h1>ABPlayerHTML5 - Videos+Danmaku</h1> 64 <hr> 65 <p>ABPlayerHTML5 is a simplistic modern danmaku video player. It is intended as a replacement for the Flash based ABPlayer and as a catalyst for the new generation of HTML5 danmaku video players. This project implements a sleek minimal video player that serves as a reference implementation.</p> 66 <p>ABPlayerHTML5 是一个简单易懂的现代弹幕魔法播放器。这个项目意在取代基于 Flash 的 ABPlayer，同时也希望能为新一代的HTML5弹幕播放器打造一个实现范例。这个播放器將用相对通俗易懂的方法，实现最基础的弹幕播放器功能，以供开发者参照。</p> 67 <h2>Examples / 使用范例</h2> 68 <hr> 69 <video id="video-1" autobuffer="true" data-setup="{}" width="800" height="450"> 70 <source src="//static.cdn.moe/ccltestingvideos/otsukimi_recital.mp4" type="video/mp4"> 71 <source src="//static.cdn.moe/ccltestingvideos/otsukimi_recital.webm" type="video/webm"> 72 <p>Your browser does not support html5 video!</p> 73 </video> 74 <video id="video-2" style="display:none;" data-setup="{}" width="800" height="450"> 75 <source src="//static.cdn.moe/ccltestingvideos/outer_science.webm" type="video/webm"> 76 <source src="//static.cdn.moe/ccltestingvideos/outer_science.mp4" type="video/mp4"> 77 <p>Your browser does not support html5 video!</p> 78 </video> 79 <div id="load-player"></div> 80 <a id="click-load" class="pbutton" href="#">Load ABPlayerHTML5 Binding</a><br> 81 <p>To load the ABPlayer code in your web application insert the following lines of code in the <code><head></code> area.</p> 82 <pre><code><link rel="stylesheet" href="css/base.min.css?1" /> 83 <script src="js/CommentCoreLibrary.min.js"></script> 84 <script src="js/ABPlayer.min.js"></script> 85 </code></pre> 86 <p>Also copy the corresponding files from <code>build/</code>. </p> 87 <p> 88 Then to hook bindings you can use: 89 </p> 90 <pre><code>var inst = ABP.create( document.getElementById('load-player'), { 91 'src': document.getElementById('new-video'), 92 'width': 800, 93 'height': 522 94 }); 95 CommentLoader('somecommentfile.xml', inst.cmManager);</code></pre> 96 97 <p>For ther first parameter you should give a DOM element or a DOM id name. If your element is already an <code>.ABP-Unit</code>, invoking create will clear any existing inner elements and bind a new player on the spot. If the element specified is not a danmaku player, we will append a new danmaku player element to the end of the given element.<br> The <code>src</code> field for the parameters will specify where the video source is. If it's a DOM element we just incorporate it as the video player, if it is a list of URLs we will create a player unit with the sources specified. We also support playlists as demonstrated here by using the following code:</p> 98 99 <pre><code>ABP.create(document.getElementById("load-player"), { 100 "src":{ 101 "playlist":[ 102 { 103 "video":document.getElementById("video-1"), 104 "comments":"comment-otsukimi.xml" 105 }, 106 { 107 "video":document.getElementById("video-2"), 108 "comments":"comment-science.xml" 109 } 110 ] 111 }, 112 "width":800, 113 "height":522 114 });</code></pre> 115 116 <p>This will automatically move to the next video and load the next comment file. It does not cycle through videos (yet). Also instead of providing a <code>"video":Element</code> property, you can also provide a <code>"sources"</code> object with each key as the mime type and each value as the URL.</p> 117 </section> 118 <hr> 119 <h2>Extending / 扩展</h2> 120 <hr> 121 <p>The basic player does not provide any comment sending abilities. To send comments you should hook onto the <code>inst.txtText</code> text input and capture keypresses to send comments.</p> 122 <p>播放器本体比较弱，同时也不提供发送弹幕的服务。希望发送弹幕的话，请挂载一个监听器到 <code>inst.txtText</code> 元素上来监听键盘动作。</p> 123 <p>For more detailed information about the API please look in <code>docs/</code> / 请阅读<code>docs/</code>中的相应文档来获取API 的更详细信息。</p> 124 <hr> 125 <h2>Flexibility / 灵活性</h2> 126 <hr> 127 <p>ABPlayerHTML5 can be added onto any existing HTML5 library. It is just a special DIV :) ABPlayerHTML5播放器非常的灵活，可以和几乎任何现有的HTML5库一起并用，因为毕竟我们封装在div里面。下面就是几个参考的样例：</p> 128 <p><a href="demos/coverflow.html">Coverflow + Danmaku Demo</a> : Uses coverflow for jQuery + ABPlayerHTML5 Dynamic loading.</p> 129 <p><a href="demos/periodic_video.html">Periodical Table of Videos</a> : Uses three.js css3d renderer. Yes, three.js. </p> 130 <h2>License / 许可</h2> 131 <p>Copyright (c) 2014 Jim Chen (http://kanoha.org/), under the MIT license.</p> 132 </div> 133 </body> 134 </html>