SuperVideo - H5视频播放插件

最新推荐文章于 2024-08-16 08:28:23 发布

码奴生来只知道前进~

最新推荐文章于 2024-08-16 08:28:23 发布

阅读量3k

点赞数

分类专栏： jQuery 文章标签： H5视频播放弹幕全屏倍速控制 JavaScript

本文链接：https://blog.csdn.net/tanqingfu1/article/details/109091256

版权

jQuery 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

今天给大家分享一个视频播放插件，支持发送弹幕的。

<!DOCTYPE html>
<html lang="cn"><head><link href="css/main-css.css" rel="stylesheet"></head>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>SuperVideo - H5视频播放插件</title>
    <style>
      html,body {
        width: 100%;
        height: 100%;
        background-color: #292929;
      }
      * {
        padding: 0;
        margin: 0;
      }
       /* 设置视频外部容器样式 */
      #videoContainer {
        width: 800px;
        height: 500px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 80px;
      }
    </style>
  <body>
    <!-- 设置视频插件容器 -->
	<span>这个是视频标题显示的地方</span>
    <div id="videoContainer"></div>
<script type="text/javascript" src="superVideo.js"></script></body>
  <script>
    /* 以下将定义视频插件常用的几个控件 */
    // 实例化一个“下一个”按钮控件
    var nextControl = new Super.NextControl()
    // 实例化一个倍速控件
    var Dbspeen = new Super.DbspeenControl()
    // 实例化一个弹幕输入框控件
    var BarrageControl = new Super.BarrageControl()
    // 实例化一个全屏按钮控件
    var fullScreenControl = new Super.FullScreenControl()
    // 实例化视频播放资源
    var source = new Super.VideoSource({
      // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
      // src: 视频路径，可以是本地路径亦可是网络路径
      type: 'mp4',
      src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4'
    })

    /* 插件的常用配置参数 */
    var config = {
      // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
      autoplay: false,
      currentTime: 0, // 设置视频初始播放时间，单位为秒
      loop: false, // 是否循环播放
      muted: false, // 是否默认静音
      playbackRate: 1, // 视频默认播放速度
      poster: '', // 视频首帧图片路径
      volume: 0.5, // 视频默认音量 0-1
      showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
      source: source, // 为视频插件设置资源
      leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
      rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
      centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
    }

    //初始化插件superVideo('videoContainer')请对应好html中的插件容器id.
    var video = new Super.Svideo('videoContainer', config)

    /* 以下是控件类常用的监听事件 */

    // 监听“下一个”按钮控件点击事件
    nextControl.addEventListener('click', function(event) {
      alert('click next menu !!!')
    })
    // 监听进入全屏模式后触发（点击进入全屏按钮）
    fullScreenControl.addEventListener('fullscreen', function(event) {
      console.log('is fullscreen !!!')
    })
    // 监听退出全屏模式后触发（点击退出全屏按钮）
    fullScreenControl.addEventListener('cancelfullscreen', function(event) {
      console.log('cancel fullscreen !!!')
    })
    // 监听发送弹幕输入框输入并发送弹幕后触发
    BarrageControl.addEventListener('send', function(event) {
      var value = event.target.option.value
      console.log('send ' + value)
    })

    /* 以下是video类常用的监听事件 */
    // 视频准备就绪
    video.addEventListener('ready', function() {
      console.log('is ready!')
    })
    // 开始播放
    video.addEventListener('play', function() {
      console.log('is play!')
    })
    // 暂停播放
    video.addEventListener('pause', function() {
      console.log('is pause!')
    })
    // 监听进入全屏模式后触发
    video.addEventListener('fullscreen', function(event) {
      console.log('is fullscreen !!!')
    })
    // 监听退出全屏模式后触发
    video.addEventListener('cancelfullscreen', function(event) {
      console.log('cancel fullscreen !!!')
    })

    /* 下面将演示弹幕类的用法 */

    // 初始化一个弹幕实例
    var barrage1 = new Super.Barrage('我是一条红色的超大号字体弹幕', {
      color: 'red',
      fontSize: 30
    })
    // 将该弹幕加入播放器插件
    video.addBarrage(barrage1)

    // 还可以在弹幕中插入一些dom节点
    var vipDom = document.createElement('span')
    vipDom.innerHTML = 'V'
    vipDom.style.color = 'green'
    vipDom.style.fontSize = '20px'
    vipDom.style.fontWeight = '600'
    vipDom.style.marginRight = '4px'
    var barrage2 = new Super.Barrage('我是超级会员VIP', {
      color: 'orange',
      fontSize: 15,
      leftDom: vipDom // 将DOM插入弹幕左侧
    })
    video.addBarrage(barrage2)

    // 当然也可以这样简单的使用
    video.addBarrage('冲鸭~~~~~~')
    video.addBarrage('奥里给！！！！！！')
	
	
	
	//弹幕列表显示
	var dm_value = ["我是红色弹幕字体","我是蓝色弹幕字体"];
	var color_value = ['red','blue'];
	for(var i=0;i<dm_value.length;i++){
	 // 初始化一个弹幕实例
		var barrage = new Super.Barrage(dm_value[i], {
			color: color_value[i],
			//fontSize: 30
		})
    // 将该弹幕加入播放器插件
		video.addBarrage(barrage);
	}
  </script>
</html>

这个是视频播放的一个截图下面附上一个下载文件，下载之后就可以直接看到效果

下载地址：SuperVideo - H5视频播放插件

码奴生来只知道前进~

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
5
评论
SuperVideo - H5视频播放插件

今天给大家分享一个视频播放插件，支持发送弹幕的。<!DOCTYPE html><html lang="cn"><head><link href="css/main-css.css" rel="stylesheet"></head> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed.
复制链接

扫一扫