MuiPlayer实现兼容移动端的带弹幕视频播放器效果代码
代码语言：html
所属分类：多媒体
代码描述：MuiPlayer实现兼容移动端的带弹幕视频播放器效果代码，MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mui-player.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mui-player.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mui-player-mobile-plugin.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mui-player-desktop-plugin.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/CommentCoreLibrary.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CommentCoreLibrary.min.js"></script>
<script>
var playerConfig = {
container: '#mui-player',
title: 'Your Title',
src: '//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4',
poster: '//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png',
videoAttribute: [{
attrKey: 'webkit-playsinline',
attrValue: ''
},
{
attrKey: 'playsinline',
attrValue: ''
},
{
attrKey: 'x5-playsinline',
attrValue: ''
},
{
attrKey: 't7-video-player-type',
attrValue: 'inline'
},
{
attrKey: 'x5-video-player-type',
attrValue: 'h5-page'
},
{
attrKey: 'x-webkit-airplay',
attrValue: 'allow'
},
{
attrKey: 'controlslist',
attrValue: 'nodownload'
},
],
}
var danmakuList = [{
"mode": 1,
"text": "请画出受力分析（10分）",
"stime": 200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 5,
"text": "这风景太漂亮了吧~",
"stime": 1000,
"size": 25,
"dur": 4000,
"color": 0xFF0000
},
{
"mode": 5,
"text": "前方高能，建议反复观看！！",
"stime": 1500,
"size": 25,
"dur": 4000,
"color": 0xFFFF00
},
{
"mode": 5,
"text": "yee~~",
"stime": 1700,
"size": 25,
"dur": 5000,
"color": 0xFF0000
},
{
"mode": 5,
"text": "我要到这里走一走",
"stime": 2500,
"size": 36,
"dur": 4000,
"color": 0x00FF00
},
{
"mode": 4,
"text": "♥ MUIPLAYER.JS.ORG ♥",
"stime": 3100,
"size": 18,
"dur": 5500,
"color": 0xFF0000,
},
{
"mode": 4,
"text": "Mui Player 一款优秀的 H5 视频播放器框架",
"stime": 3000,
"size": 25,
"dur": 5500,
"color": 0xFFFF00
},
{
"mode": 1,
"text": "姐姐记得给视频加中国的水印！！",
"stime": 400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "水中贵足",
"stime": 600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "我在地上踩都摔成狗",
"stime": 800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "不会沉？",
"stime": 1000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China",
"stime": 1200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "理论上可行实际上难度不低",
"stime": 1600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "一苇渡江",
"stime": 1800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 2000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "我虽无意逐鹿，却知苍生苦楚",
"stime": 2200,
"size": 25,
"dur": 7000,
"color": 0xFF0000
},
{
"mode": 1,
"text": "练过，早说啊",
"stime": 2400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China",
"stime": 2600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China China",
"stime": 2800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China",
"stime": 3000,
"size": 25,
"dur": 7000,
"color": 0x9900FF
},
{
"mode": 1,
"text": "天动万象",
"stime": 3400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "啊啊，好美",
"stime": 3600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 3800,
"size": 36,
"dur": 7000,
"color": 0x66FFFF
},
{
"mode": 1,
"text": "哇哦这bgm",
"stime": 4000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "把我整不会了",
"stime": 4200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "小七孔？",
"stime": 4400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "小脑壳好用",
"stime": 4600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天赋",
"stime": 4800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "求竹竿视觉",
"stime": 5000,
"size": 25,
"dur": 7000,
"color": 0xFFFF00
},
{
"mode": 1,
"text": "一苇渡江绝世风华",
"stime": 5400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "china",
"stime": 5800,
"size": 25,
"dur": 7000,
"color": 0x66FFFF
},
{
"mode": 1,
"text": "美美美",
"stime": 6000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 6200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "牛拉了",
"stime": 6400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "太强了",
"stime": 6600,
"size": 25,
"dur": 7000,
"color": 0x66FFFF
},
{
"mode": 1,
"text": "很厉害",
"stime": 6800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "加水印的？",
"stime": 7200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "只愿荡敌四方 换得浮生一隅",
"stime": 7400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "钟离",
"stime": 7600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China",
"stime": 8000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "一苇渡江原来是真的！",
"stime": 8200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万相！！",
"stime": 8400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "先学游泳",
"stime": 8600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 8800,
"size": 25,
"dur": 7000,
"color": 0xFF0000
},
{
"mode": 1,
"text": "恭迎老祖",
"stime": 9000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "嗯？",
"stime": 9200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 9400,
"size": 25,
"dur": 7000,
"color": 0x00FF00
},
{
"mode": 1,
"text": "天动万象",
"stime": 9600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 9800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "厉害",
"stime": 10000,
"size": 25,
"dur": 7000,
"color": 0x00FF00
},
{
"mode": 1,
"text": "有没摔下水的，我看看",
"stime": 10200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "牛",
"stime": 10400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 10600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "上回书说到",
"stime": 10800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "上回书说到",
"stime": 11000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象！",
"stime": 11200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "求拍摄视角",
"stime": 11400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China",
"stime": 11600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "牛蛙",
"stime": 12000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "吃呐",
"stime": 12200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "万象天引",
"stime": 12400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "万象天引",
"stime": 12600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 12800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "钟师傅：你们就没有属于自己的bug吗？（不好意思，还真没有）",
"stime": 13000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "开头就一个尘世闲游",
"stime": 13200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "我上竹子直接就沉了",
"stime": 13400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China",
"stime": 13600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "应该要练很长时间吧",
"stime": 13800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "哎呀",
"stime": 14000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": ".",
"stime": 14200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天动万象",
"stime": 14400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "肯定失手过",
"stime": 14600,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "独竹漂",
"stime": 14800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "这居然是真实存在的",
"stime": 15000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天，如履平地",
"stime": 15400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "China",
"stime": 15600,
"size": 25,
"dur": 7000,
"color": 0xFF0000
},
{
"mode": 1,
"text": "China",
"stime": 15800,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "却知天下苦楚",
"stime": 16000,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "我随无意逐鹿",
"stime": 16200,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
"mode": 1,
"text": "天 动 万 象",
"stime": 16400,
"size": 25,
"dur": 7000,
"color": 0xffffff
},
{
".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0