buildingLanding/js/videoList.js

var player = videojs('example');
 
	player.playlist([
	{
	  name:'视频教程-调价',
	  // description:'Explore the depths of our planet\'s oceans.',
	  duration:596,
	  sources: [{
	    src: 'https://d4.smartcost.com.cn/%E5%91%86%E7%93%9C%E5%AD%A6%E9%80%A0%E4%BB%B7-%E5%85%AC%E8%B7%AF%E7%AF%87-%E6%9C%89logo.mp4',
	    type: 'video/mp4'
	  }],
	  poster:'http://media.w3.org/2010/05/bunny/poster.png',
	  thumbnail: [
	  	{
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{
	  		src:'http://media.w3.org/2010/05/bunny/poster.png'
	  	}
  	  ]
	},
	{
	  name:'视频教程-共用单价文件',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:52,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://d1video.smartcost.com.cn/video/play/2018/step1.mp4',
	    type: 'video/mp4'
	  }],
	  //视频封面地址
	  // poster:'http://media.w3.org/2010/05/sintel/poster.png',
	  //右侧视频播放列表的图片
	  thumbnail: [
	  	{//默认图片
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(max-width: 130px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://media.w3.org/2010/05/sintel/poster.png'
	  	}
  	  ]
	}, {
	  name:'视频教程-清单精灵',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:734,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/playlist.m3u8',
	    type: 'application/x-mpegurl'
	  }],
	  //视频封面地址
	  poster:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg',
	  
	  thumbnail: [
	  	{//默认图片
          srcset: 'img/jinjihu.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg'
	  	}
  	  ]
	},
	{
	  name:'视频教程-调价',
	  description:'Explore the depths of our planet\'s oceans.',
	  duration:596,
	  sources: [{
	    src: 'https://d4.smartcost.com.cn/%E5%91%86%E7%93%9C%E5%AD%A6%E9%80%A0%E4%BB%B7-%E5%85%AC%E8%B7%AF%E7%AF%87-%E6%9C%89logo.mp4',
	    type: 'video/mp4'
	  }],
	  poster:'http://media.w3.org/2010/05/bunny/poster.png',
	  thumbnail: [
	  	{
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{
	  		src:'http://media.w3.org/2010/05/bunny/poster.png'
	  	}
  	  ]
	},
	{
	  name:'视频教程-共用单价文件',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:52,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://d1video.smartcost.com.cn/video/play/2018/step1.mp4',
	    type: 'video/mp4'
	  }],
	  //视频封面地址
	  // poster:'http://media.w3.org/2010/05/sintel/poster.png',
	  //右侧视频播放列表的图片
	  thumbnail: [
	  	{//默认图片
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(max-width: 130px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://media.w3.org/2010/05/sintel/poster.png'
	  	}
  	  ]
	}, {
	  name:'视频教程-清单精灵',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:734,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/playlist.m3u8',
	    type: 'application/x-mpegurl'
	  }],
	  //视频封面地址
	  poster:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg',
	  
	  thumbnail: [
	  	{//默认图片
          srcset: 'img/jinjihu.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg'
	  	}
  	  ]
	},
	{
	  name:'视频教程-调价',
	  description:'Explore the depths of our planet\'s oceans.',
	  duration:596,
	  sources: [{
	    src: 'https://d4.smartcost.com.cn/%E5%91%86%E7%93%9C%E5%AD%A6%E9%80%A0%E4%BB%B7-%E5%85%AC%E8%B7%AF%E7%AF%87-%E6%9C%89logo.mp4',
	    type: 'video/mp4'
	  }],
	  poster:'http://media.w3.org/2010/05/bunny/poster.png',
	  thumbnail: [
	  	{
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{
	  		src:'http://media.w3.org/2010/05/bunny/poster.png'
	  	}
  	  ]
	},
	{
	  name:'视频教程-共用单价文件',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:52,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://d1video.smartcost.com.cn/video/play/2018/step1.mp4',
	    type: 'video/mp4'
	  }],
	  //视频封面地址
	  // poster:'http://media.w3.org/2010/05/sintel/poster.png',
	  //右侧视频播放列表的图片
	  thumbnail: [
	  	{//默认图片
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(max-width: 130px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://media.w3.org/2010/05/sintel/poster.png'
	  	}
  	  ]
	}, {
	  name:'视频教程-清单精灵',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:734,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/playlist.m3u8',
	    type: 'application/x-mpegurl'
	  }],
	  //视频封面地址
	  poster:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg',
	  
	  thumbnail: [
	  	{//默认图片
          srcset: 'img/jinjihu.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg'
	  	}
  	  ]
	}
	]);
	 
	player.playlistUi();
	player.playlist.autoadvance(0); // 自动播放， 0秒延时
	player.playlist.repeat(true); //循环播放