### uniapp纯前端视频追剧神器，开箱即用 [视频播放器，免费影院，追剧神器]

用户784001528705
573 阅读12分钟

uniapp纯前端视频追剧神器，开箱即用 视频播放器，免费影院，追剧神器

uniapp纯前端爬取视频，免费追剧神器，开箱即用，内置接口源，选集，投屏，倍速播放都已适配，下一集，弹幕，截图等未适配，有需要的自己实现。

作者： 140***@qq.com 

  

下载人数: 4      下载次数: 5       收藏人数: 2

    

（0）

插件ID：jds-tv

插件包体积：21.3MB

更新记录

 1.8.8（2024-06-04）

1.通过内置api.js获取视频源，无后端，纯前端项目。 2.内置好用播放器ext.dcloud.net.cn/plugin?id=8… 3.新增全屏的时候选集功能。 4.新增右上角投屏功能，投屏仅支持安卓端，不同投机系统适配不一样，有需要的自己再适配。 5.新增分享功能，你觉得比较好看的视频可以点击分享按钮复制视频地址发给好朋友。 6.新增香港tv源。 7.新增播放器顶部滚动公告。

平台兼容性

Vue2Vue3
√×
App快应用微信小程序支付宝小程序百度小程序字节小程序QQ小程序
HBuilderX 3.91 app-vue××××××
钉钉小程序快手小程序飞书小程序京东小程序
××××
H5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxPC-Safari
×××××××××

使用须知

  • 1.这个纯前端视频软件一共用了了两个开源的插件进行修改而成。【1.无后端影视 2.好用播放器】
  • 2.本项目新增了动态获取视频封面为轮播图，并且点击轮播图可进行对应的视频播放。
  • 3.支持视频格式有ogg、mp4、webm、m3u8、flv
  • 4.支持弹幕功能
  • 5.将搜索框移到了主页，更集中
  • 6.播放器添加了投屏功能，投屏功能仅适用安卓端，不同手机需自己适配进行实现投屏，本人手机当贝投影仪已适配，可投屏。
  • 7.播放器新增了选集功能，全屏状态下不用退出全屏进行选集。
  • 8.新增播放器顶部滚动公告栏。
  • 9.播放器右上角新增当时北京时间和当前第几集显示，让你不用点击屏幕也能知道当前时间，主打纯净追剧。
  • 10.播放器左边加入了logo显示，全屏状态隐藏logo，还加入了分享功能，遇到好看的视频可以点击复制微信粘贴分享给好友看。
  • 11.未实现的功能还有，下一集，需要自己去修改动态获取下一集的videourl。弹幕和截屏也需要自己实现。本人业余爱好者，有什么建议可以加我qq：1406389941进行交流指导。
  • 下面是好用播放器的适用说明，可以根据下面的使用说明进行自定义，比如跳过片头片尾。

props属性

属性名类型默认值可选值说明
dataIdString--------唯一id（ 不传入则默认随机ID）
srcString--------播放链接
posterString--------封面
formatsStringautoauto/mp4/ogg/webm/m3u8/flv视频格式（auto只能确定拥有后缀的播放链接，没有视频后缀的链接只能指定格式播放）
titleString--------视频标题（全屏后在顶部展示）
volumeNumber1.0----音量
durationNumber0----播放时长（当isLive为true时表现为直播已播放时长）
playShowBooleantruetrue/false展示播放按钮
timeShowBooleantruetrue/false展示播放时间
volumeShowBooleantruetrue/false展示静音按钮
settingShowBooleantruetrue/false展示设置按钮
fullscreenShowBooleantruetrue/false展示全屏按钮
prevBtnShowBooleanfalsetrue/false展示切换上一个视频按钮
nextBtnShowBooleanfalsetrue/false展示切换下一个视频按钮
initialTimeNumber0----播放初始位置 (单位是秒)
playbackRateNumber1.0----播放倍速
autoplayBooleanfalsetrue/false自动播放 (新版的谷歌浏览器和IOS一样也不支持自动播放了，需要让用户在页面上操作之后才能进行播放，如果一定要自动播放，只能先设置为静音，然后让用户手动将静音关闭)
loopBooleanfalsetrue/false循环播放
preloadStringatuoauto（加载所有资源）/meta（只加载元数据）/none（不加载）预加载（autoplay设置为true时忽略此属性）
mutedBooleanfalsetrue/false静音
controlsBooleantruetrue/false显示控制栏
settingsStringallall（全部显示）/barrage（弹幕控制）,playbackRate（倍速列表）,mirror（镜像画面）,capture（截取画面）,pictureInPicture（画中画）控制栏设置菜单显示（all表示全部显示，不想全部显示但要显示多个以逗号分隔）
mirrorBooleanfalsetrue/false镜像画面
progressShowBooleantruetrue/false展示进度条
barrageShowBooleantruetrue/false展示弹幕
barragesArray--------弹幕列表
barrageConfigNumber1.0----弹幕配置
barrageGapNumber0----弹幕显示上下间距
isLiveBooleanfalsetrue/false是否是直播流
flvConfigObject--------flv配置
segmentsArray--------flv切片列表
fullscreenDirectionStringlandscape-primaryauto/landscape-primary/portrait-primary/landscape-secondary/portrait-secondary全屏时设备方向 （只支持APP）
generallyDirectionStringportrait-primaryauto/landscape-primary/portrait-primary/landscape-secondary/portrait-secondary非全屏时设备方向 （只支持APP）
objectFitStringcontaincontain/fill/cover/none当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖，none：不处理
crossOriginString----anoymous/use-credentials该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。 支持CORS的资源 可在 canvas元素中被重用，而不会被污染。允许的值如下：anonymous：跨域请求会被执行，但是不发送凭证。use-credentials：跨域请求A cross-origin request会被执行，且凭证会被发送。
enableBlobBooleanfalsetrue/false将视频转化为Blob对象（仅支持mp4）

event事件

事件名参数说明
canplay---可以播放状态，但不保证后面可以流畅播放，视频总长度，尺寸信息可以从这里取到 （该事件只要视频发生加载就会触发，如果想在这个方法做一些操作，建议用loadedmetadata或loadeddata替代）
canplaythrough---可以正常播放且无需停顿和缓冲时触发。，视频总长度，尺寸信息可以从这里取到 （该事件只要视频发生加载就会触发，如果想在这个方法做一些操作，建议用loadedmetadata或loadeddata替代）
loadeddata----加载视频当前帧时触发，视频总长度，尺寸信息可以从这里取到
loadedmetadata----元素据加载完毕，视频总长度，尺寸信息可以从这里取到
loadstart----开始加载视频时触发
play---播放事件
pause---暂停事件
stop---停止事件
ended---自然播放结束事件
error---播放错误事件
abort---播放中断事件
timeupdate---播放进度更新事件
waiting---加载中事件，当视频因为数据不足，需要停下来加载时会触发
playing---继续播放事件，当视频因为数据不足停下来成功加载到数据之后继续播放时触发
seeking---进行跳转进度操作事件
seeked---完成跳转进度操作事件
seizing---视频（直播流）播放卡住事件（仅在播放时间卡住时起效）
volumeChange---音量改变事件
rateChange---播放倍速改变事件
durationChange---播放进度改变事件
fullscreenChange---全屏切换事件（type为requestfullscreen表示为全屏API调用的全屏type为cssfullscreen表示css模拟的全屏）
controlsChange---控制栏显示\消失事件（仅在controls为true时有效）
barrageChange---弹幕显示\消失事件
enterpictureinpicture---进入画中画模式（仅支持H5）
leavepictureinpicture---退出画中画模式（仅支持H5）
captureFinish---截图完成事件（H5会返回blob类型和base64图片，app只返回base64）
prevBtnClick---点击切换上一个视频按钮事件
nextBtnClick---点击切换下一个视频按钮事件
statisticsInfo---flv监听statistic_info事件
loadingComplete---flv监听loading_complete事件
recoveredEarlyEof---flv监听recovered_early_eof事件
mediaInfo---flv监听media_info事件
metadataArrived---flv监听metadata_arrived事件
scriptdataArrived---flv监听scriptdata_arrived事件

内置方法

方法名参数说明
play---播放
pause---暂停
toggle---播放/暂停
reload---重加载
stop---停止（注销视频）
seek---跳转位置（单位是s）
drawBarrage---绘制弹幕（可传入多条弹幕）
capture---截取画面
switchFullscreen---开启/退出全屏（部分手机不允许用户直接调用全屏API，插件自动使用css模拟全屏替代）
launchFullscreen---开启全屏（部分手机不允许用户直接调用全屏API，插件自动使用css模拟全屏替代）
exitFullscreen---退出全屏
switchPictureInPicture---切换画中画（仅支持H5）
launchPictureInPicture---开启画中画（仅支持H5）
exitPictureInPicture---退出画中画（仅支持H5）

弹幕（barrage）

属性名类型说明
keyString弹幕的唯一标识
timeNumber弹幕出现的时间(单位：秒)
textString弹幕文本内容
fontSizeNumber弹幕大小(单位：像素)
colorString弹幕颜色

弹幕配置（barrageConfig）

属性名类型默认值说明
durationNumber-1弹幕动画的循环周期，-1 表示不循环播放
speedNumber150弹幕的运动速度
fontSizeNumber24文字大小（单位：像素）
fontFamilyString'Microsoft Yahei'字体
textShadowBlurNumber0.5字体阴影扩散，有效值 >= 0
opacityNumber1透明度，有效值 0-1
defaultColorString'#ffffff'默认颜色，与 CSS 颜色属性一致
lineHeightNumber5行间距
overlapBooleantrue防重叠
playbackRateNumber1播放倍速
initialTimeNumber0播放初始时间

flv切片列表（segments）

属性名类型说明
durationNumber必填字段，表示段持续时间（以毫秒为单位
filesizeNumber可选字段，以字节为单位指示段文件大小
urlString必填字段，指示段文件URL

flv配置（flvConfig）

属性名类型默认值说明
corsBoolean----是否启用CORS进行http提取
withCredentialsBoolean----是否对Cookie进行http提取
hasAudioBoolean----流是否有音频轨道
hasVideoBoolean----流中是否有视频轨道
durationNumber----总媒体持续时间（以毫秒为单位）
filesizeNumber----媒体文件的总文件大小，以字节为单位
enableWorkerBooleanfalse启用分离的线程进行转换（暂时不稳定）
enableWorkerBooleanfalse启用分离的线程进行转换（暂时不稳定）
enableStashBufferBooleantrue启用IO隐藏缓冲区。如果您需要实时（最小延迟）进行实时流播放，则设置为false，但是如果网络抖动，则可能会停顿
stashInitialSizeNumber384KB表示IO暂存缓冲区的初始大小。默认值为384KB。指出合适的尺寸可以改善视频负载/搜索时间
isLiveBooleanfalse同样要isLive在MediaDataSource，如果忽略已经在MediaDataSource结构集合
lazyLoadBooleantrue如果有足够的数据可播放，则中止http连接
lazyLoadMaxDurationNumber3 * 60指示要保留多少秒的数据lazyLoad
lazyLoadRecoverDurationNumber30指示lazyLoad恢复时间边界，以秒为单位
deferLoadAfterSourceOpenBooleantrue在MediaSourcesourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页
autoCleanupSourceBufferBooleanfalse对SourceBuffer进行自动清理
autoCleanupMaxBackwardDurationNumber3 * 60当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
autoCleanupMinBackwardDurationNumber2 * 60指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）
fixAudioTimestampGapBooleantrue当检测到较大的音频时间戳间隙时，请填充无声音频帧，以避免A / V不同步
accurateSeekBooleanfalse精确查找任何帧，不限于视频IDR帧，但可能会慢一些。可用的Chrome > 50，FireFox和Safari
seekTypeString'range''range'使用范围请求进行查找，或'param'在url中添加参数以指示请求范围
seekParamStartString'bstart'指示的搜索起始参数名称 seekType = 'param'
seekParamEndString'bend'指示的搜索结束参数名称 seekType = 'param'
rangeLoadZeroStartBooleanfalseRange: bytes=0-如果使用范围查找，则发送首次负载
customSeekHandlerObject----指示自定义搜索处理程序
reuseRedirectedURLBooleanfalse重复使用301/302重定向的url进行子序列请求，例如搜索，重新连接等
referrerPolicyString'no-referrer-when-downgrade'指示使用FetchStreamLoader时的推荐人策略
headersObject----指示将添加到请求的其他标头

插槽slots

名称说明
default默认插槽（该插槽的内容不随控制栏一起消失/显示）
controls控制栏插槽（该插槽的内容会随控制栏一起消失/显示，仅在controls为ture时有效）

History路由模式下引入js文件

    <!-- 引入插件内的js文件 -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <script>
          var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
            CSS.supports('top: constant(a)'))
          (
            '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
            (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <script type="text/javascript" src="/uni_modules/yingbing-video/static/flv.min.js"></script>
        <script type="text/javascript" src="/uni_modules/yingbing-video/static/hls.min.js"></script>
        <title></title>
        <!--preload-links-->
        <!--app-context-->
      </head>
      <body>
        <div id="app"><!--app-html--></div>
      </body>
    </html>

快速开始

    <!-- 引入播放器 -->
    <yingbing-video src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4">
    </yingbing-video>

自动播放

    <!-- 新版的chrome浏览器和IOS一样，用户未进行任何操作时不能播放视频和音频，如果一定要自动播放，需要设置为静音模式，再让用户手动关闭静音 -->
    <yingbing-video autoplay muted src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>

添加弹幕列表

    <!-- 引入播放器 -->
    <yingbing-video :barrages="barrages" barrage-show src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>

export default {
    data() {
        return {
            barrages: [{
                key: 'fctc651a9pm2j20bia8j',
                time: 1,
                text: '这是新增的一条弹幕',
                fontSize: 24,
                color: '#0ff',
            },{
                key: 'fctc651a9pm2j20bia8j',
                time: 1,
                text: '这是新增的一条弹幕',
                fontSize: 24,
                color: '#0ff',
            }]
        }
    }
}

绘制弹幕

    <!-- 引入播放器 -->
    <yingbing-video ref="video" barrage-show src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>

export default {
    onReady () {
        setTimeout (() => {
            this.$refs.video.drawBarrage({
                text: '这是绘制的实时弹幕',
                color: '#ff0033',
                fontSize: 20,
                time: 12//不传time 则根据当前播放进度绘制弹幕出现时间
            })
        }, 5000)
        //绘制3条弹幕
        setTimeout (() => {
            this.$refs.video.drawBarrage([{
                text: '这是绘制的实时弹幕',
                color: '#ff0033',
                fontSize: 20
            },{
                text: '这是绘制的实时弹幕',
                color: '#ff0033',
                fontSize: 20
            },{
                text: '这是绘制的实时弹幕',
                color: '#ff0033',
                fontSize: 20
            }])
        }, 10000)
    }
}

截取画面

    <!-- 引入播放器 -->
    <yingbing-video ref="video" @captureFinish="onCaptureFinish" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>
    <button @tap="capture">截图</button>

export default {
    methods: {
        capture () {
            this.$refs.video.capture()
        },
        //截图完成事件
        onCaptureFinish (e) {
            console.log(e)
        }
    }
}

切换视频

    <!-- 引入播放器 并显示切换下一个视频按钮 -->
    <yingbing-video next-btn-show @nextBtnClick="onNextBtnclick" :src="src"/>

export default {
    data () {
        src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4'
    },
    methods: {
        //切换下一个视频
        onNextBtnclick () {
            this.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4'
        }
    }
}

使用插槽

    <yingbing-video src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4">
        <!-- 默认插槽 -->
        <div>加载中</div>
        <!-- 控制栏插槽 -->
        <template #controls>
            <div style="position:absolute;top:0;left:0;right:0;">视频标题</div>
        </template>
    </yingbing-video>
avatar
文章
阅读
粉丝