文档地址：https://docs.apicloud.com/Client-API/Func-Ext/videoPlayer
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  5. <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
  6. <style type="text/css">
  7. html{ background-color: white; }
  8. header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
  9. span {
  10. padding: 10px 15px;
  11. margin: 10px;
  12. display: inline-block;
  13. background-color: #e8e8e8;
  14. }
  15. .hover{ opacity: . 4; }
  16. </style>
  17. </head>
  18. <body>
  19. <header>
  20. <h1>videoPlayer </h1>
  21. <mark>
  22. 使用前请详细阅读 文档 使用规则
  23. </mark>
  24. </header>
  25. <span tapmode="hover" onclick="fnPlay()">play </span>
  26. <span tapmode="hover" onclick="fnOpen()">open </span>
  27. <span tapmode="hover" onclick="fnSetPath()">setPath </span>
  28. <span tapmode="hover" onclick="fnStart()">start </span>
  29. <span tapmode="hover" onclick="fnPause()">pause </span>
  30. <span tapmode="hover" onclick="fnStop()">stop </span>
  31. <span tapmode="hover" onclick="fnClose()">close </span>
  32. <span tapmode="hover" onclick="fnShow()">show </span>
  33. <span tapmode="hover" onclick="fnHide()">hide </span>
  34. <span tapmode="hover" onclick="fnFullScreen()">fullScreen </span>
  35. <span tapmode="hover" onclick="fnCancelFullScreen()">cancelFullScreen </span>
  36. <span tapmode="hover" onclick="fnForward()">forward </span>
  37. <span tapmode="hover" onclick="fnRewind()">rewind </span>
  38. <span tapmode="hover" onclick="fnSeekTo()">seekTo </span>
  39. <span tapmode="hover" onclick="fnSetBrightness()">setBrightness </span>
  40. <span tapmode="hover" onclick="fnGetBrightness()">getBrightness </span>
  41. <span tapmode="hover" onclick="fnSetVolume()">setVolume </span>
  42. <span tapmode="hover" onclick="fnGetVolume()">getVolume </span>
  43. <span tapmode="hover" onclick="fnAddEventListener()">addEventListener </span>
  44. <span tapmode="hover" onclick="fnRemoveEventListener()">removeEventListener </span>
  45. <span tapmode="hover" onclick="fnSetRect()">setRect </span>
  47. </body>
  48. </html>
  49. <script type="text/javascript">
  50. var videoPlayer;
  51. apiready = function() {
  52. videoPlayer = api.require( 'videoPlayer');
  53. };
  55. function fnPlay(){
  56. var videoPlayer = api.require( 'videoPlayer');
  57. videoPlayer.play({
  58. texts: {
  59. head: {
  60. title: '顶部文字'
  61. }
  62. },
  63. styles: {
  64. head: {
  65. bg: 'rgba(0.5,0.5,0.5,0.7)',
  66. height: 44,
  67. titleSize: 16,
  68. titleColor: '#fff',
  69. backSize: 20,
  70. backImg: 'widget://image/back.png',
  71. setSize: 20,
  72. setImg: 'widget://image/set.png'
  73. },
  75. },
  76. path: 'http://resource.apicloud.com/video/apicloud3.mp4',
  77. autoPlay: true
  78. }, function(ret, err) {
  79. alert( JSON.stringify(ret));
  80. if (ret) {
  81. alert( JSON.stringify(ret));
  82. } else {
  83. alert( JSON.stringify(err));
  84. }
  85. });
  86. }
  88. function fnOpen(){
  89. videoPlayer.open({
  90. rect:{
  91. y: 30,
  92. h: 150
  93. },
  94. autoPlay: true,
  95. path: 'http://resource.apicloud.com/video/apicloud3.mp4'
  96. }, function(ret, err){
  97. if( ret.status ){
  98. alert( JSON.stringify( ret ) );
  99. } else{
  100. alert( JSON.stringify( err ) );
  101. }
  102. });
  103. }
  104. function fnSetPath(){
  105. videoPlayer.setPath({
  106. path: 'http://resource.apicloud.com/video/apicloud3.mp4'
  107. });
  108. }
  109. function fnStart(){
  110. videoPlayer.start();
  111. }
  112. function fnPause(){
  113. videoPlayer.pause();
  114. }
  115. function fnStop(){
  116. videoPlayer.stop();
  117. }
  118. function fnClose(){
  119. videoPlayer.close();
  120. }
  121. function fnShow(){
  122. videoPlayer.show();
  123. }
  124. function fnHide(){
  125. videoPlayer.hide();
  126. }
  127. function fnFullScreen(){
  128. videoPlayer.fullScreen();
  129. }
  130. function fnCancelFullScreen(){
  131. videoPlayer.cancelFullScreen();
  132. }
  133. function fnForward(){
  134. videoPlayer.forward({
  135. seconds: 5
  136. });
  137. }
  138. function fnRewind(){
  139. videoPlayer.rewind({
  140. seconds: 5
  141. });
  142. }
  143. function fnSeekTo(){
  144. videoPlayer.seekTo({
  145. seconds: 20
  146. });
  147. }
  148. function fnSetBrightness(){
  149. videoPlayer.setBrightness({
  150. brightness: 50
  151. });
  152. }
  153. function fnGetBrightness(){
  154. videoPlayer.getBrightness( function( ret, err ){
  155. if( ret ){
  156. alert( JSON.stringify( ret ) );
  157. } else{
  158. alert( JSON.stringify( err ) );
  159. }
  160. });
  161. }
  162. function fnSetVolume(){
  163. videoPlayer.setVolume({
  164. volume: 0.6
  165. });
  166. }
  167. function fnGetVolume(){
  168. videoPlayer.getVolume( function( ret, err ){
  169. if( ret ){
  170. alert( JSON.stringify( ret ) );
  171. } else{
  172. alert( JSON.stringify( err ) );
  173. }
  174. });
  175. }
  176. function fnAddEventListener(){
  177. videoPlayer.addEventListener({
  178. name: 'leftUp'
  179. }, function(ret, err){
  180. if( ret ){
  181. alert( JSON.stringify( ret ) );
  182. } else{
  183. alert( JSON.stringify( err ) );
  184. }
  185. });
  186. }
  187. function fnRemoveEventListener(){
  188. videoPlayer.removeEventListener({
  189. name: 'leftUp'
  190. });
  191. }
  192. function fnSetRect(){
  193. videoPlayer.setRect({
  194. rect:{
  195. x: 0,
  196. y: 0,
  197. w: 'auto',
  198. h: 'auto'
  199. },
  200. fullscreen: true
  201. });
  202. }
  204. </script>