# 视频播放器 ## 8.5.视频播放器 视频播放器使用的是西瓜视频开源的[xgplayer](http://h5player.bytedance.com/)，使用方式： ~~~ <div id="demoVideo"></div> <script> layui.use(['Player'], function () { var Player = layui.Player; // 视频播放器 var player = new Player({ id: "demoVideo", url: "//s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4", // 视频地址 poster: "https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png", // 封面 fluid: true, // 宽度100% playbackRate: [0.5, 1, 1.5, 2], // 开启倍速播放 pip: true, // 开启画中画 lang: 'zh-cn' }); // 开启弹幕 var dmStyle = { color: '#ffcd08', fontSize: '20px' }; var player = new Player({ id: "demoVideo2", url: "http://demo.htmleaf.com/1704/201704071459/video/2.mp4", // 视频地址 autoplay: false, fluid: true, // 宽度100% lang: 'zh-cn', danmu: { comments: [ {id: '1', start: 0, txt: '空降', color: true, style: dmStyle, duration: 15000}, {id: '2', start: 1500, txt: '前方高能', color: true, style: dmStyle, duration: 15000}, {id: '3', start: 3500, txt: '弹幕护体', color: true, style: dmStyle, duration: 15000}, ] } }); }); </script> ~~~