使用JS实现视频无缝切换-优快云博客

本文链接：https://blog.youkuaiyun.com/nebear/article/details/51984427

本文详细介绍了如何利用JavaScript实现视频播放的无缝切换效果，通过动态改变HTML5 video元素的src属性，确保视频播放的流畅性和用户体验。同时，结合jQuery库进行辅助操作，简化了DOM操作的复杂性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" >
$(document).ready(function () {

	//视频点击
	
	$ifrVideo = $('#ifr_video');
	$('#video .video_item').click(function () {
		var $this = $(this),
			vid = $this.attr('data-vid'),
			// src = url + '?vid=' + vid + optsStr;
			src = vid;
		$ifrVideo.attr({
			src: src
		});
		
		
		var embedsrc_str='<embed id="embedsrc" src='   +   src   +   '  id="ifr_video"  quality="high" width="670" height="410" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" mode="transparent" />';
		$("#vPlayer").html(embedsrc_str);
		
		
	}).eq(0).click();
	
	$("#video a").click(function(){
		$(this).find("p").addClass("col");
		$(this).siblings().find("p").removeClass("col");
	})


});
</script>

<div class="video">


	<div id="vPlayer">
        <embed src="http://static.video.qq.com/TPout.swf?vid=w030242tf7k&auto=0"  id="ifr_video"  quality="high" width="670" height="410" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" mode="transparent"></embed>
    </div>
    
    
    <div id="video">
        <a class="video_item" data-vid="http://static.video.qq.com/TPout.swf?vid=w030242tf7k&auto=0" href="javascript:;">
        	<img src="images/bx1.jpg"/>
            <p class="col">老冰箱VS新冰箱</p>
        </a>
        <a class="video_item" data-vid="http://static.video.qq.com/TPout.swf?vid=p03027kfwus&auto=0" href="javascript:;">
        	<img src="images/bx2.jpg"/>
            <p>你的冰箱对得起房价吗？</p>
        </a>
        <a class="video_item" data-vid="http://static.video.qq.com/TPout.swf?vid=p0302gvixwv&auto=0" href="javascript:;">
        	<img src="images/bx3.jpg"/>
            <p>吃什么？问它！</p>
        </a>
        <a class="video_item" data-vid="http://static.video.qq.com/TPout.swf?vid=n0302wtxctt&auto=0" href="javascript:;">
        	<img src="images/bx4.jpg"/>
            <p>关于冰箱分区</p>
        </a>
        <a class="video_item" data-vid="http://static.video.qq.com/TPout.swf?vid=z0302dawa69&auto=0" href="javascript:;">
        	<img src="images/bx5.jpg"/>
            <p>关于"风冷"你怎么看？</p>
        </a>
        <a class="video_item" data-vid="http://static.video.qq.com/TPout.swf?vid=r0302sa1p9l&auto=0" href="javascript:;">
        	<img src="images/bx6.jpg"/>
            <p>买食材送冰箱？</p>
        </a>
        <a class="video_item" data-vid="http://static.video.qq.com/TPout.swf?vid=j0302ojjspi&auto=0" href="javascript:;">
        	<img src="images/bx7.jpg"/>
            <p>冰箱也能"私人定制"</p>
        </a>
    </div>
    
</div>

视频切换JS