使用tvp.player_v2_zepto.js播放腾讯视频

最新推荐文章于 2021-06-08 13:54:07 发布

原创最新推荐文章于 2021-06-08 13:54:07 发布 · 4.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

WEB技术专栏收录该内容

60 篇文章

订阅专栏

本文介绍如何在网页中集成腾讯视频播放器，通过引入必要的JS文件并利用jQuery和Zepto实现自定义播放器皮肤样式及播放指定视频ID的内容。

tvp.player_v2_zepto.js还需要zepto.min.js。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
		<script src="https://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2_zepto.js" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div class="rich_media_content" id="js_content">
			
		</div>
		
	<script type="text/javascript">
		//var vid = 't0508alameb';
		var vid = 'n0660sjputv';
		function play_video () {
			var video , player, playStatus = 'pending';
			
			var elId = 'mod_player_skin_0';
			$("#js_content").html('<div id="' + elId + '" class="player_skin" style="padding-top:6px;"></div>');
			var elWidth = $("#js_content").width();
			playVideo(vid, elId, elWidth);
		}
		function playVideo(vid, elId, elWidth) {
				video = new tvp.VideoInfo();
				video.setVid(vid);
				player = new tvp.Player(elWidth, 200);
				player.setCurVideo(video);
				player.addParam("wmode", "transparent");
				player.addParam("pic", tvp.common.getVideoSnapMobile(vid));
				player.write(elId);
			}
	
	    play_video();
	</script>	
	</body>
</html>