js——视播放器模板

模型样式：https://demo.easyweb.vip/iframe/

js方法：


<h1>播放器</h1>
<hr />
<div style="padding: 5px;"><div id="demoVideo"></div>
</div>
@section Scripts{<script src="~/lib/jquery/dist/jquery.min.js"></script><script src="~/js/Player.js"></script><script>$(function () {// 开启弹幕var dmStyle = {color: '#ffcd08',fontSize: '25px'};var dmStyle2 = {color: '#EE0000',fontSize: '220px'};var player = new Player({id: "demoVideo",url: "/Content/video/4.mp4",  // 视频地址poster: "https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png",  // 封面fluid: true,  // 宽度100%autoplay: true,playbackRate: [0.5, 1, 1.5, 2, 3, 5, 10],  // 开启倍速播放pip: true,  // 开启画中画lang: 'zh-cn',danmu: {comments: [{ id: '1', start: 0, txt: '前方高能', color: true, style: dmStyle, duration: 1000 },{ id: '2', start: 3500, txt: '666', color: true, style: dmStyle2, duration: 3000 },{ id: '3', start: 3500, txt: '弹幕护体', color: true, style: dmStyle, duration: 15000 },{ id: '4', start: 4500, txt: '弹幕护体', color: true, style: dmStyle, duration: 15000 },{ id: '5', start: 3500, txt: '前方高能111', color: true, style: dmStyle, duration: 15000 },{ id: '6', start: 8500, txt: '弹幕护体', color: true, style: dmStyle, duration: 15000 },{ id: '7', start: 10000, txt: '666666666', color: true, style: dmStyle, duration: 15000 },{ id: '8', start: 12500, txt: '前方高能', color: true, style: dmStyle, duration: 15000 },{ id: '9', start: 15500, txt: '666666666', color: true, style: dmStyle, duration: 15000 },{ id: '10', start: 16500, txt: '666666666', color: true, style: dmStyle, duration: 15000 },{ id: '11', start: 18000, txt: '关弹幕，保智商', color: true, style: dmStyle, duration: 15000 },{ id: '12', start: 20500, txt: '关弹幕，保智商', color: true, style: dmStyle, duration: 15000 },{ id: '13', start: 22000, txt: '666666666', color: true, style: dmStyle, duration: 15000 },{ id: '14', start: 25500, txt: '666666666', color: true, style: dmStyle, duration: 15000 },{ id: '15', start: 26000, txt: '前方高能', color: true, style: dmStyle, duration: 15000 }]}});});</script>
}

引入js文件：Player.js

js——视播放器模板相关推荐

用html制作静态音乐欣赏,纯静态HTML音乐播放器模板
[实例简介] 纯静态HTML音乐播放器模板,可以直接套用到cms后台使用,页面简洁漂亮 www.guangrao.ren [实例截图] [核心代码] 525460f6-62cf-4282-9d42-3 ...
SkeyeWebPlayer.js H5播放器是怎么样炼成的
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
SkeyeWebPlayer.js H5播放器开发之播放器video动态创建（三）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...
php项目网页音乐播放器插件,10个免费开源的JS音乐播放器插件
10个免费开源的JS音乐播放器插件三月 24, 2015 评论 (3) Sponsor 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里 ...
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档）
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...
开发那些事儿：在Flv.js前端播放器中解析并绘制H.264编码中的SEI信息
流媒体中的SEI是指补充增强信息(Supplemental Enhancement Information),它提供了向视频码流中加入信息的办法,是H.264/H.265视频压缩标准的特性之一.SEI ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...

js——视播放器模板

js——视播放器模板相关推荐

最新文章

热门文章