如何制作可以切换的视频播放器

制作网页播放器节目可切换类型的

操作方法

  • 01

    html代码部分： <div id="sp"> <!-- 视频内容开始 --> <div class="Con"> <div class="avi">  </div> </div> <!-- 视频内容结束 --> <!-- 视频列表开始 --> <div class="List"> <ul id="shiping"> <!-- {foreach from=$dedaoo_shiping item=sp} 视频列表 --> <li name="视频单元" data-album="2015-08-05" data-title="{$sp.title|escape:html}" dataSrc="{$sp.url}" > <a href="javascript:void(0)" target="">{$sp.title|escape:html}</a></li> <!--{/foreach}--> </ul> </div> <!-- 视频列表结束 --> </div>

  • 02

    jquery代码部分： <!-- 应用外部jquery文件 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _index = 0; $(".List ul li").eq(_index).addClass("current"); var firstaviSrc = $("#sp .List ul li").eq(_index).attr("dataSrc"); setvideo(firstaviSrc); $(".List ul li").click(function(){ _index = $(this).index(); $(this).addClass("current").siblings("li").removeClass("current"); var aviSrc =$(this).attr("dataSrc"); setvideo(aviSrc); }); function setvideo(aviSrc) { $(".avi").html("<embed src='"+aviSrc+"' allowFullScreen='true' quality='high' width='525' height='331' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash' allownetworking='internal'></embed>"); } </script>

  • 03

    效果如图所示：

赞 (0)

相关推荐

  • 手机桌面图标制作之视频播放器

    在我们的手机桌面图标中,视频播放器也是我们手机桌面图标必备的一个,那么,我们如何制作一个好看的视频播放器图标呢,小编在这为你详细介绍一下:手机桌面图标制作之视频播放器的制作方法. 操作方法 01 首先 ...

  • 搜狐视频播放器切换播放模式

    搜狐视频播放器在观看在线视频或者播放本地视频的时候，你可以进行标准界面播放、全屏播放或者迷你界面播放，你可以在播放的时候方便快捷的进行切换播放模式。 默认，搜狐视频播放器是以标准界面进行播放视频的，鼠 ...

  • b站怎么切换到html5视频播放器的效果?

    b站也就是bilibili,在b站,“如果您想体验HTML5视频播放器的效果,请开启HTML5视频播放器试用”,那么怎么切换到html5呢?下面我截图操作说明一下. 1.首先在浏览器中进入b站主站,然 ...

  • 红蜻蜓抓图精灵抓视频播放器画面时一片漆黑解决及常见问题解答

    FAQ1:为何抓视频播放器画面结果一片漆黑？ 用户普遍反映红蜻蜓抓图精灵(RdfSnap)无法对视频播放器中的视频进行正确捕捉，表现为只能捕捉播放器框架，而播放画面处只有黑背底没有图像，这个问题可以通 ...

  • 红蜻蜓抓图精灵为何抓视频播放器画面结果一片漆黑?

    用户普遍反映红蜻蜓抓图精灵(RdfSnap)无法对视频播放器中的视频进行正确捕捉，表现为只能捕捉播放器框架，而播放画面处只有黑背底没有图像，这个问题可以通过降低视频播放器的视频加速性能来解决，以下是几 ...

  • 如何利用百度视频播放器批量下载网页视频?

    平时上网的时候总会出现各种你感兴趣的网页视频，如果你想把它下载下来怎么办，下面系统之家小编告诉你一个不用安装专门的下载软件，睡觉前在网页上点播，睡醒后这些连续剧下载好的办法。 前几天，我从网上搜索连续 ...

  • 如何使用腾讯视频播放器的视频输出功能

    如何使用腾讯视频播放器的视频输出功能

  • 魔力视频播放器的使用教程

    魔力视频播放器如何使用? 1、首先搜索安智论坛，然后进入安智安卓软件专区 2、魔力视频播放器 Moliplayer 是安卓平台上最优秀的音视频播放器。 3、支持DLNA/uPnP远程播放，可以在房间内 ...

  • 如何取消MAC电脑上VLC视频播放器的显示状态菜单图标功能

    如何取消MAC电脑上VLC视频播放器的显示状态菜单图标功能

    Mac电脑上VLC视频播放器中显示的状态菜单图标,怎么取消显示呢?今天就跟大家介绍一下如何取消MAC电脑上VLC视频播放器的显示状态菜单图标功能的具体操作步骤.1. 首先打开电脑,找到VLC播放器,打 ...