Artplayer.js - HTML5 视频播放器

一直想往前端流媒体方面研究，学习视频播放器 API 期间，断断续续的终于整体实现了一个简单的播放器，以及一些相关的插件、工具和组件。之前在 v 站发过一次求测试，现在终于有一个相对稳定的版本，但兼容性问题还是有的，想大佬们继续帮忙测试一下。其实写到一半才发现和其他播放器项目重名了，感觉悲催了。详细功能的话好像也和其他播放器差不多，但在写的过程中发现和学习了一些好玩的东西，例如：

Chrome 的画中画模式确实很方便
原来前端也可以把 srt 字幕转成 vtt 字幕直接使用
可以直接从视频生成 GIF，但很依赖网络情况:Demo
可以从视频帧中提取颜色样本，做出一张背光的效果:Demo
弹幕的优化主要在于怎么让弹幕尽量少的发生碰撞，要做到像 B 站那种效果确实还挺难的:Demo
前端也可以生成视频的预览图，对于简单的需求很方便，对于自动化场景还是要靠后端:Demo
对于没有弹幕库服务器的，可以使用 Github Issues Api 做弹幕库，但每小时最多五千请求，可以玩一下:Demo

var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({container: '.artplayer-app',url: url + '/video/one-more-time-one-more-chance-480p.mp4',title: 'One More Time One More Chance',poster: url + '/image/one-more-time-one-more-chance-poster.jpg',volume: 0.5,isLive: false,muted: false,autoplay: false,pip: true,autoSize: true,screenshot: true,setting: true,loop: true,flip: true,playbackRate: true,aspectRatio: true,fullscreen: true,fullscreenWeb: true,mutex: true,theme: '#ffad00',lang: navigator.language.toLowerCase(),moreVideoAttr: {crossOrigin: 'anonymous',},contextmenu: [{html: 'Custom menu',click: function(contextmenu) {console.info('You clicked on the custom menu');contextmenu.show = false;},},],layers: [{html: `<img style="width: 100px" src="${url}/image/your-name.png">`,click: function() {art.destroy(true);art = new Artplayer({autoplay: true,container: '.artplayer-app',url: url + '/video/your-name.mp4',});},style: {position: 'absolute',top: '20px',right: '20px',opacity: '.9',},},],quality: [{default: true,name: 'SD 480P',url: url + '/video/one-more-time-one-more-chance-480p.mp4',},{name: 'HD 720P',url: url + '/video/one-more-time-one-more-chance-720p.mp4',},],thumbnails: {url: url + '/image/one-more-time-one-more-chance-thumbnails.png',width: 190,height: 107,},subtitle: {url: url + '/subtitle/one-more-time-one-more-chance.srt',style: {color: '#03A9F4',},},highlight: [{time: 60,text: 'One more chance',},{time: 120,text: '谁でもいいはずなのに',},{time: 180,text: '夏の想い出がまわる',},{time: 240,text: 'こんなとこにあるはずもないのに',},{time: 300,text: '终わり',},],controls: [{name: 'preview',position: 'right',html: 'OPEN',mounted: $preview => {art.plugins.localPreview.attach($preview);},},],icons: {loading: '<img src="./assets/img/ploading.gif">',state: '<img src="./assets/img/state.png">',},
});

Artplayer.js - HTML5 视频播放器相关推荐

video.js html5 视频播放器
1 我个人感觉很不错 2 https://github.com/videojs/video.js 3 <head> 4 <title>Video.js | HTML5 Vide ...
php h5视频播放器,基于JSON数据HTML5视频播放器js插件
frame-player是一款基于JSON数据HTML5视频播放器js插件.该插件没有使用视频文件,只使用JSON格式的数据.在移动手机设备上使用图片帧的形式来播放视频文件. HTML5视频文件的一个 ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
HTML5视频播放器jQuery插件
HTML5 Video player jQuery plugin As you know – HTML5 <video> element is already supported by m ...
html5视频播放器一（改写默认样式）
一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等先看看效果是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...
在线html5视频播放器,分享10款最棒的免费HTML5视频播放器
最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题.HTML5可以在没有flash的情况下播放视频.现在有很 ...
在线html5视频播放器,打造自己的html5视频播放器
推荐这篇文章: 前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的&qu ...
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...

Artplayer.js - HTML5 视频播放器

Artplayer.js - HTML5 视频播放器相关推荐

最新文章

热门文章