js——视播放器模板

最新推荐文章于 2024-04-17 09:39:46 发布

Lazyinit

最新推荐文章于 2024-04-17 09:39:46 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Lazyinit/article/details/99734870

前端专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何利用JS来创建一个视频播放器模板。提供了模型样式的演示链接，并提到了关键的JS文件Player.js的引入方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模型样式：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