视频播放实现

eeb919d7 · wenguang · 7e9fb78f · eeb919d7 · eeb919d7
Showing with 19 addition and 0 deletion

src/main/resources/static/js/dplayer.min.js src/main/resources/static/js/dplayer.min.js +2 -0

src/main/resources/templates/mysqltest/listtest.html src/main/resources/templates/mysqltest/listtest.html +17 -0

未找到文件。
--- a/src/main/resources/static/js/dplayer.min.js
+++ b/src/main/resources/static/js/dplayer.min.js
--- a/src/main/resources/templates/mysqltest/listtest.html
+++ b/src/main/resources/templates/mysqltest/listtest.html
@@ -15,6 +15,8 @@

    <script th:src="@{static/js/jquery.min.js}"></script>
    <script th:src="@{static/js/bootstrap.min.js}"></script>
+    <!-- 播放器 -->
+    <script th:src="@{static/js/dplayer.min.js}"></script>
    <!-- bootstrap-table 表格插件 -->
    <script th:src="@{static/ajax/libs/bootstrap-table/bootstrap-table.min.js}"></script>
    <script th:src="@{static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
@@ -34,11 +36,16 @@
    <!-- bootstrap-select下拉框插件 -->
    <link th:href="@{static/ajax/libs/bootstrap-select/bootstrap-select.css}" rel="stylesheet"/>
    <script th:src="@{static/ajax/libs/bootstrap-select/bootstrap-select.js}"></script>
+
+
 </head>
 <body>
 <div style="margin: 100px 100px">
    <table id="table" data-toggle="table" data-search="true"></table>
 </div>
+<div style="margin: 500px">
+    <div id="dplayer" style="width: 700px;height: 400px;"></div>
+</div>

 <script>
    $('#table').bootstrapTable({
@@ -72,6 +79,16 @@
        }
        ]
    });
+
+    var dplayer = new DPlayer({
+        container: document.getElementById('dplayer'),
+        video: {  //视频源 包含不同分辨率源
+            url: 'https://miaopai.video.weibocdn.com/3i2kZrKclx07ghClI6ek01040201q6HH0E013?Expires=1585212543&ssig=kCLO2uUXXO&KID=unistore,video'
+        },
+        danmaku: {
+            addition: ['http://api.prprpr.me/dplayer/v3/bilibili?oid=12345'],
+        },
+    });
 </script>
 </body>
 </html>
\ No newline at end of file