应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

使用dplayer进行视频播放

8906人阅读 2020/8/22 14:22 总访问:5182768 评论:0 收藏:0 手机
分类: 前端

贴个小demo:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width" />
  5.     <title>测试视频播放</title>
  6.     <script src="~/lib/DPlayer/DPlayer.js"></script>
  7. </head>
  8. <body>
  9.         <div id="player1" class="dplayer" style="width:600px;height:400px">
  10.         </div>
  11.     <script>
  12.         var dp1 = new DPlayer({
  13.             elementdocument.getElementById('dplayer1'),
  14.             preload'none',
  15.             screenshottrue,
  16.             video: {
  17.                 url'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
  18.                 pic'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
  19.                 thumbnails'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
  20.             },
  21.             subtitle: {
  22.                 url'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt'
  23.             }
  24.         });
  25.     </script>
  26. </body>
  27. </html>

视频的宽高就由那个小div来觉定,它会自适应的,效果如下。还是很不错的一个播放效果



想要有播放集数的效果,就是弄一个左右布局写一点东西即可,左右布局可以参考:
https://www.tnblog.net/aojiancc2/article/details/4887



欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价