# 視頻播放器 ## 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> ~~~