Question

我有一个视频标题列表。每个页面都会显示一个包含相关视频的页面和一些信息（播放器，说明，讨论......）。

<div id="video-list">
<a href="/Video/title-1">Title 1</a><br />
<a href="/Video/title-2">Title 2</a><br />
<a href="/Video/title-3">Title 3</a><br />
</div>

我想用Javascript / JQuery让事情变得更有活力。屏幕分为两部分，左侧是视频列表，右侧是信息。

<a href="javascript: PlayVideo(123);">Title 1</a>

但我仍然希望为没有javascript和搜索引擎抓取工具的人保留旧链接。

这是一个像

这样的好主意

<a href="/Video/title-1" videoid="123">Title 1</a>

并使用JQuery循环所有锚点以获取videoid并替换href？

（服务器端是asp.net mvc，javascript和静态端已经工作）

Answer 1

您可以使用框架集，适用于每个浏览器。它是一个古老的方式，但会给你你想要的东西，因为它不依赖于Javascript

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

供您参考frameset

Answer 2

简短的回答，您可以使用iFrame来实现您想要的效果。将屏幕拆分为两个div，左边div存储链接，右边div存储iframe和视频播放器。

http://jsfiddle.net/2vmYG/ - ＆gt;完整的CSS

<div id="container">
    <div id="videoList">
        <a href='http://www.dailymotion.com/video/xzvsp7_joe-jack-the-mogul-mulla_music#.UZMPerUwpuA' target="video">Video 1</a><br/>
        <a href='http://www.dailymotion.com/video/xzu16h_daft-punk-random-access-memories-unboxed_music#.UZMPRbUwpuA' target="video">Video 2</a><br/>
    </div>
    <div id="videoPlayer">
        <iframe id='video' src=""></iframe>
    </div>
</div>

如果您正在寻找完整的AJAX / jQuery解决方案，则需要一个播放器（流媒体播放器，jwplayer）等。

拥有动态内容，同时保持旧的静态页面

2 个答案: