关注

基于原生js实现的hls视频播放器,可播放m3u8视频tiancai-video-hls

tiancai-video-hls

npm i tiancai-video-hls --save

基于原生js实现的hls视频播放器,可播放m3u8视频

Demo:

https://j3812549.github.io/pages/index.html#/tiancaivideohls

GITHUB:

https://github.com/j3812549/tiancai-video-hls

使用示例:

  import TiancaiVideoHls from '/src/main.js'
  // import TiancaiVideoHls from './dist/tiancai-video-hls.js'
  // import './dist/style.css'
  const video = new TiancaiVideoHls({
    box: document.getElementById('tiancai9-video'),
    sources: ['https://c3.monidai.com/20231119/JqT4DANw/index.m3u8', 'https://c3.monid43ai.com/202', 'https://c354.mon424idai.com/202']
  })
功能介绍:
  • 视频播放

  • 播放暂停

  • 进度条控件

  • 多源播放-传入url数组,递归链接可用,遇到可用源进行播放

  • H5

    • H5伪全屏
    • 左滑亮度
    • 右滑音量
    • 长按2倍速
  • PC

    • 全屏
    • 小窗播放
    • 音量键按钮
  • 弹幕功能

参数说明:
名称参数描述
autoPlayfalse(默认)、true是否自动播放
boxdocument.getElementById(‘tiancai9-video’)(默认)、HTMLDivElement需要实例化的div容器
sourcesArray视频资源地址的数组
onHandle详见监听事件示例
事件:
名称参数描述
play播放
pause暂停
reinit重新初始化
replay重新播放
destroy销毁
exitFullscreen退出全屏
openFullscreen唤起全屏
监听事件:
  const video = new TiancaiVideoHls({
    autoPlay: ....,
    onHandle: {
      onError: () => { console.log('onError') },
      onSuccee: () => { console.log(`onSuccee`) },
      onProgress: () => { console.log(`onProgress`) },
      onPlaying: () => { console.log(`onPlaying`) },
      onEnded: () => { console.log(`onEnded`) },
      onPause: () => { console.log(`onPause`) },
      onPlay: () => { console.log(`onPlay`) },
      onCanplay: () => { console.log(`onCanplay`) }
    },
    box: ....,
    sources: ....
  })
名称描述
onError所有视频源加载错误失败时触发
onSuccee视频源加载成功时候触发
onProgress实时进度,返回 { currentTime: 播放进度 }
onPlaying播放成功时触发
onEnded播放结束时触发
onPause暂停时触发
onPlay开始播放时触发
onCanplay视频源加载成功时候触发

转载自CSDN-专业IT技术社区

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/qq_42018777/article/details/136152264

评论

赞0

评论列表

微信小程序
QQ小程序

关于作者

点赞数:0
关注数:0
粉丝:0
文章:0
关注标签:0
加入于:--