videojs动态设置sources

最新推荐文章于 2023-08-17 15:10:51 发布

转载最新推荐文章于 2023-08-17 15:10:51 发布 · 4.3k 阅读

videojs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用video.js库实现视频播放器在不同源间平滑切换的方法，包括暂停、重置时间、更新源及加载新源的完整流程。

var player;

$(document).ready(function() {
	player = videojs('my_video_1', {
		techOrder: ['flash', 'html5'],
		autoplay: true,
		sources: [{ 
			type: "video/flv",
			src: "http://www.longtailvideo.com/jw/upload/bunny.flv"
		}]
	});
	
	
	$('a.one').on('click', function() {
		changeSource({ 
			type: "video/webm",
			src: "http://upload.wikimedia.org/wikipedia/mediawiki/d/d1/Wikipedia_on_Google_Glass_screencast_test.webm"
		});
	});
	
	$('a.two').on('click', function() {
		changeSource({ 
			type: "video/flv",
			src: "http://www.mediacollege.com/video-gallery/testclips/20051210-w50s_56K.flv"
		});
	});
});

function changeSource(src) {
	player.pause();
	player.currentTime(0);
	
	player.src(src);
	
	player.ready(function() {
		this.one('loadeddata', videojs.bind(this, function() {
			this.currentTime(0);
		}));

		this.load();
		this.play();
	});
}