ocx test.htm 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <HTML>
  2. <HEAD>
  3. <TITLE>
  4. EasyPlayer Plugin Example
  5. </TITLE>
  6. <script type="text/javascript">
  7. function config() {
  8. var obj = document.getElementById("EasyPlayerOcx");
  9. var cache = document.getElementById("cache").value;
  10. var playsound = document.getElementById("playsound").checked ? 1 : 0;
  11. var showtoscale = document.getElementById("showtoscale").checked ? 1 : 0;
  12. var showsatic = document.getElementById("showsatic").checked ? 1 : 0;
  13. obj.Config(cache, playsound, showtoscale, showsatic);
  14. obj.SetOSD(1, 255, 0, 0, 255, 100, 100, 1000, 150, "EasyPlayer-RTSP OSD测试");
  15. //alert(cache+";"+playsound+";"+showtoscale+";"+showsatic);
  16. }
  17. function startplay() {
  18. var obj = document.getElementById("EasyPlayerOcx");
  19. var url = document.getElementById("url").value;
  20. var rendertype = document.getElementById("rendertype").value;
  21. var name = document.getElementById("name").value;
  22. var password = document.getElementById("password").value;
  23. var harddecode = document.getElementById("harddecode").checked ? 1 : 0;
  24. var rtpovertcp = document.getElementById("rtpovertcp").checked ? 1 : 0;
  25. obj.Start(url, rendertype, name, password, harddecode,rtpovertcp);
  26. config();
  27. //alert(url+";"+rendertype+";"+name+";"+password);
  28. }
  29. function stopplay() {
  30. //alert("Close()!!!!!");
  31. var obj = document.getElementById("EasyPlayerOcx");
  32. obj.Close();
  33. }
  34. </script>
  35. <style>
  36. input[type=range] {
  37. border-radius: 10px;
  38. border: none;
  39. margin-top: 0;
  40. }
  41. input[type=range]::-ms-track {
  42. border-radius: 10px;
  43. border-color: transparent;
  44. color: transparent;
  45. }
  46. input[type=range]::-ms-thumb {
  47. border: solid 0.125em rgba(205, 224, 230, 0.5);
  48. height: 10px;
  49. width: 25px;
  50. background: #f0f0f0;
  51. box-shadow: 0 .125em .125em #3b4547;
  52. }
  53. input[type=range]::-ms-fill-lower {
  54. border-radius: 10px;
  55. background: linear-gradient(to right, #059CFA, white 100%, white);
  56. }
  57. input[type=range]::-ms-fill-upper {
  58. border-radius: 10px;
  59. background: #ffffff;
  60. }
  61. input[type=range]:focus::-ms-fill-lower {
  62. background: linear-gradient(to right, #059CFA, white 100%, white);
  63. }
  64. input[type=range]:focus::-ms-fill-upper {
  65. background: #ffffff;
  66. }
  67. .buttons {
  68. padding-top: 10px;
  69. position: relative;
  70. height: 35px;
  71. }
  72. button {
  73. color: #333;
  74. background-color: #fff;
  75. border-color: #ccc;
  76. display: inline-block;
  77. padding: 6px 12px;
  78. margin-bottom: 0;
  79. font-size: 12px;
  80. font-weight: 400;
  81. line-height: 1.42857143;
  82. text-align: center;
  83. white-space: nowrap;
  84. vertical-align: middle;
  85. touch-action: manipulation;
  86. cursor: pointer;
  87. user-select: none;
  88. background-image: none;
  89. border: 1px solid #ccc;
  90. border-radius: 4px;
  91. width: 65px;
  92. height: 35px;
  93. position: absolute;
  94. bottom: 0px;
  95. left: 50%;
  96. }
  97. .start {
  98. background: #286090;
  99. color: #fff;
  100. margin-left: -85px;
  101. }
  102. .stop {
  103. background: #e6e6e6;
  104. color: #000;
  105. margin-left: 0px;
  106. }
  107. </style>
  108. </HEAD>
  109. <BODY>
  110. <center>
  111. <p></p>
  112. <OBJECT ID="EasyPlayerOcx" WIDTH="1280px" HEIGHT="600px" CLASSID="CLSID:1EE1C648-F4A9-42F9-9AA7-2C8E3AF7B7FD">
  113. </OBJECT>
  114. <br><br>
  115. RTSP URL:
  116. <input type="text" name="url" id="url" size=128 VALUE="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" />
  117. <br> <br>
  118. 用户名:
  119. <input type="text" name="name" id="name" size=25 value="" /> 密码:
  120. <input type="text" name="password" id="password" size=25 value="" />
  121. <br>
  122. 缓存:
  123. <input type="range" max="10" min="1" name="cache" id="cache" size=25 value="3" />
  124. &nbsp;&nbsp;&nbsp;&nbsp;
  125. RenderFormat:
  126. <input type="range" max="7" min="1" name="rendertype" id="rendertype" VALUE="7" />
  127. <br>
  128. RTP Over TCP:
  129. <input type="checkbox" name="rtpovertcp" id="rtpovertcp" size=25 checked="checked" />
  130. &nbsp;&nbsp;&nbsp;&nbsp;
  131. 播放声音:
  132. <input type="checkbox" name="playsound" id="playsound" size=25 value="1" checked="checked"/>
  133. &nbsp;&nbsp;&nbsp;&nbsp;
  134. 采用硬解码:
  135. <input type="checkbox" name="harddecode" id="harddecode" size=25 value="1" checked="checked"/>
  136. &nbsp;&nbsp;&nbsp;&nbsp;
  137. 按比例显示:
  138. <input type="checkbox" name="showtoscale" id="showtoscale" size=25 value="1" checked="checked" />
  139. &nbsp;&nbsp;&nbsp;&nbsp;
  140. 显示码率信息:
  141. <input type="checkbox" name="showsatic" id="showsatic" size=25 value="1" checked="checked" />
  142. <br>
  143. <div class="buttons">
  144. <button class="start" type="button" onclick="startplay();">Start</button>
  145. <button class="stop" type="button" onclick="stopplay();">Stop</button>
  146. </div>
  147. </center>
  148. </BODY>
  149. </HTML>