阿豪的个人博客网站_专注于web项目前端、后端、api接口、小程序、公众号、WordPress模板开发。

上帝想阻止邪恶,但却做不到?那么,他不是万能的。他是能做得到,但不愿意去做?那么,他是恶意的。难道他能做而且又愿意做?那么,邪恶从何而来?难道他既做不到又不愿意做?那么,为什么还称他为神呢? - 伊壁鸠鲁

Videojs 片前、片中、片尾播放广告

引入videojs及videojs-ads的css和js 官方文档:http://videojs.github.io/videojs-contrib-ads/integrator/getting-started.html

<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/alt/video-js-cdn.min.css" rel="stylesheet">
<link rel="stylesheet" href="./node_modules/videojs-contrib-ads/dist/videojs.ads.css">

<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video.min.js"></script>
<!-- flash -->
<script src="https://cdn.bootcdn.net/ajax/libs/videojs-flash/2.2.1/videojs-flash.min.js"></script>
<!-- ads -->
<script src="./node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
<video id="container" class="video-js vjs-big-play-centered"  width="700" height="350"></video>

在script里配置videojs及videojs-cds:

let player = videojs('container',{
	controls: true,
	autoplay: false,
	preload: 'auto', // 预加载
	techOrder: ["html5","flash"],
	html5: {
		// 配置hls
		vhs: { withCredentials: true },
	},
	flash: {
		// 必须有一个大于400 x 300像素的可见大小,否则它将被阻塞。不可见的内容总是被屏蔽。
		swf: 'https://cdn.bootcdn.net/ajax/libs/videojs-swf/5.4.2/video-js.swf',
		vhs: { withCredentials: true },
	},
	// 播放源
	sources: [
		{
			src: "./test.mp4",
			type:'video/mp4'
		}
	]
},function(){
	var player = this;
	// 片头是否播放中结束
	var havePlayedPreroll = false;

	// 播放器加载启动 rtmp 需要加载这个才能启动广告
	player.load();
	// 初始化广告 initialize videojs-contrib-ads
	player.ads();
	// 触发广告准备(在play事件前后都可以)
	player.trigger('adsready');

	// 加载启动
	player.on('loadstart',function(e) {
		console.log('videojs 加载开始');
	});
	// 播放按钮
	player.on('play',function(e){
		console.log('播放按钮点击');
	});

	// 片前广告
	player.on('readyforpreroll', function() {
		// 启动广告
		player.ads.startLinearAdMode();
		
		// 要播放的广告
		player.src('./ad.mp4');

		// 广告播放中
		player.one('adplaying', function() {
			player.trigger('ads-ad-started');
			console.log('片头广告播放中...');
		});

		// 广告播放完成
		player.one('adended', function() {
			player.ads.endLinearAdMode();
			console.log('片头广告播放完成...');
		});
	});
	// 片中广告
	player.on('timeupdate',function(e){
		var currentTime = player.currentTime();
		// console.log('当前时间:',currentTime);
		// 这里在视频播放到15秒时开始播放广告
		if(!haveStartedMidroll && currentTime >= 15){
			haveStartedMidroll = true;
			player.trigger('adsready');
			player.src('./ad.mp4');
			// 启动广告
			player.ads.startLinearAdMode();
		}
		// 广告播放中
		player.one('adplaying', function() {
			if(haveStartedMidroll){
				player.trigger('ads-ad-started');
			}
		});

		// 广告播放完成
		player.one('adended', function() {
			player.ads.endLinearAdMode();
		});
	});
	// 片尾广告
	player.on('readyforpostroll',function(){
		// 启动广告
		player.ads.startLinearAdMode();
		// 要播放的广告
		player.src('./ad.mp4');
		// 广告播放中
		player.one('adplaying', function() {
			player.trigger('ads-ad-started');
		});

		// 广告播放完成
		player.one('adended', function() {
			player.ads.endLinearAdMode();
		});
	});
});
{{model.comment_total}} 条评论
Loading...
更多评论