网站建设

分享张戈博客的在线影音源代码

Jager · 5月12日 · 2014年在线影音 · 音乐电台 · 高清电视 885次已读

记得以前写过一篇《给博客添加网络电视页面》的文章，后来张戈将音乐电台和网络电视综合了一下，成为了现在的在线影音。

此页面用到了 iframe 框架，所以张戈用 js 封装处理了下，避免不利于 SEO 的情况(如何封装的？)

近期，有朋友私信或留言给张戈，想要我分享一下张戈博客的在线影音的源码。而我却一直因为其他事情耽搁了，现在空了点，就来分享下。

其实，我最开始是从在线工具那看到的，感觉很不错！就拿来综合修改了一下，结合了原版的在线电视和在线音乐盒，做成了在线影音。现在，张戈就把来自网络的好东西再回馈给网络上有需要的人！

一、傻瓜式通用版（适合所有建站程序）

其实，这个版本就是用浏览器打开张戈博客-在线影音后的源代码，稍微有点网页基础的孩纸就可以自助获取了！现在，张戈把 html 代码和相关文件都打包，方便不太懂代码的站长筒子们。

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>在线影音|张戈博客</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html,body{height:100%;overflow:hidden}body{font:13px/27px '微软雅黑',Arial,sans-serif;padding:0;margin:0}a{text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}#nav{color:#fff;background:#333;height:30px;line-height:30px}#nav .main{width:auto;margin:0 auto}#nav a,#nav span{margin-right:5px;color:#ccc}#nav a{margin-right:10px}#nav a:hover{color:#fff;text-decoration:none}#nav a.on,#nav a.on:hover{font-weight:bold;color:#fff}
</style>
<script type="text/javascript" src="static./wp-content/themes/HotNewspro/js/jquery.min.js" ></script>
<script type="text/javascript">
     jQuery(function() {
        jQuery('a').click(function() {
            jQuery(this).attr('class', 'on').siblings().removeAttr('class');
            jQuery('#online').attr('src', jQuery(this).attr('data'));
          //jQuery('title').html(jQuery(this).html() + '|张戈博客');  //点击修改标题功能，我默认给屏蔽了
                 });
        });
</script>
 </head>
    <body>
    <div id="nav">
    <div class="main">
    <a href="/" target="_blank">&nbsp; &nbsp; &nbsp;<span style="font-weight: 600;color: #82D900">★张戈博客首页★</span></a>
    <span style="font-weight:600;color: #00DB00">&nbsp; 网络电视：</span>
    <a data="http://live.64ma.com/tv/live.html">64 码网络电视</a>
    <a data="http://www.cietv.com/images/img/100" class="on">易视直播</a>
    <span style="font-weight:600;color: #FF0080">&nbsp; 音乐电台：</span>
    <a data="http://fm.baidu.com/">百度随心听</a>
    <a data="http://fm.qq.com/">QQ 电台</a>
    <a data="http://www.9ku.com/fm/">九酷电台</a>
    <a data="http://web.kugou.com/default.html">酷狗音乐</a>
    <a data="http://player.kuwo.cn/webmusic/play">酷我音乐</a>
    <a data="http://app.duomiyy.com/webradio/hao123/">多米音乐</a>
    <a onClick="window.external.AddFavorite('https://zhang.ge/online','在线影音|张戈博客')"><span style="color: #00FFFF">&nbsp; 亲,点此收了我吧！</span></a>
    </div>
</div>
<script type="text/javascript" src="static./wp-content/themes/HotNewspro/js/online.js"></script>
</body>
</html>

说明：其中，第 9、23、34、37 行的路径需要修改成你的实际路径，其中 jquery.min.js 是通用的 jquery 包，一般网站都会加载，如果网站已有这个文件，则直接写成对应的路径即可，搞不清楚的同鞋就索性再往下看。

具体制作方法：

①、下载源码包

地址一点击下载

②、解压后，使用记事本或编辑器修改 online.html 修改内容：

比如，如果你决定上传到根目录，则如下修改：

第 9、23 行：自己看着改；

第 11 行：http://你的网址/jquery.min.js

第 37 行：http://你的网址/online.js

③、将文件（共 3 个）上传到网站的后台空间（图简单就直接丢到根目录即可）

④、现在直接访问 http://你的网址/online.html 就可以看到效果了。

Ps：其他中文内容就不多说了，如“张戈博客”，自己看着修改吧。。。

二、WordPress 的制作方法

①、将 js 文件上传到主题目录，记住路径（已加载 jQuery 的主题，则不用重复上传，修改后面的实际路径即可）；

②、将 online.html 文件中的一些内容按照实际路径修改（如①中 js 路径，具体参考通用版）

③、在修改后的代码的最前面加上如下内容：

<?php
/*
Template Name: 在线影音
*/
?>

并另存为 online.php，上传到主题目录

④、新建页面，右侧的模板类型选择在线影音，别名修改为英文（比如 online），点击发布。

⑤、访问http://你的网站/online 即可看到效果

就写这么多，有任何问题或建议请在下面留言联系我。

74 条回应

PHP二次开发 2014-5-12 · 21:37

这个还不错，可以娱乐一下。
- Jager 2014-5-13 · 9:36
  
  我老婆喜欢看~哈哈
凌吉林 2014-5-12 · 22:21

啥时候想在博客弄点影音，再到你这里来取经
- Jager 2014-5-12 · 22:22
  
  嗯，好的
王光卫中文博客 2014-5-12 · 22:32

现在插件挺多的，但是没这个简洁
- Jager 2014-5-12 · 22:36
  
  第一个是纯静态，应该比插件还好很多。
萌妹 2014-5-12 · 23:07

额，感觉我的空间本来就好慢。。等换服务器了试试影音
- Jager 2014-5-12 · 23:13
  
  感觉你博客也不慢呢
  - 萌妹 2014-5-12 · 23:16
    
    本来是用七牛的结果用七牛间歇爆500错误然后卸载了唉好烦流量又不够用了
    - Jager 2014-5-12 · 23:20
      
      七牛的解析有时候有问题。
      - 萌妹 2014-5-12 · 23:23
        
        原来是这样啊难怪我用求牛就偶尔500 错误偶尔又很好不过能剩好多流量可惜了
瑾瑜 2014-5-13 · 0:31

这个挺好，想看电视时方便了。
- Jager 2014-5-13 · 9:05
  
  恩，其实也是自娱自乐，另外就是方便家人看看在线电视什么的。
APP雄起 2014-5-13 · 1:52

这个不错
- Jager 2014-5-13 · 9:36
  
  可以试试~哈哈
夏日博客 2014-5-13 · 9:43

这个貌似也是直接代码调用的吧。
- Jager 2014-5-13 · 9:58
  
  是框架调用，不过我用js封装了，SEO方面没事。
maillot radioshack 2014-5-13 · 10:14

唔，我打酱油好了。
多姿女性 2014-5-13 · 12:54

来向老大们学习
小鱼儿的家 2014-5-13 · 17:09

我主题自带了网络电视模块也挺不错的，只是不怎么用就没有搞，你这个也不错，赞一个
- Jager 2014-5-13 · 18:44
  
  我一会就去看看。
  - 小鱼儿的家 2014-5-13 · 18:46
    
    我没有用网络电视
leiboy 2014-5-13 · 19:03

现在基本上都看盒子或智能电视了
- Jager 2014-5-13 · 19:06
  
  嗯，有盒子谁还看这个啊。。。算是屌丝的自娱自乐吧。丰富一下网址。反正我每天都是在这里听音乐电台。
  - leiboy 2014-5-13 · 19:33
    
    嗯，这种页面前几年很流行
百家网络博客 2014-5-14 · 15:19

易视速度不是很好
- Jager 2014-5-14 · 16:52
  
  恩，有时候要卡很久，我一般用这个听歌。
Brainu 2014-5-14 · 16:44

这个不错，先留着，以备用
- Jager 2014-5-14 · 16:54
  
  可以保存源码，
三日月 2014-5-14 · 21:14

最近站点变化小大啊
- Jager 2014-5-14 · 21:19
  
  加了广告。。
  - 三日月 2014-5-14 · 21:20
    
    广告估计被我的玩意屏蔽了，我觉得变化挺大的
    - Jager 2014-5-14 · 21:21
      
      其他没啥变吧。
      - 三日月 2014-5-14 · 21:22
        
        还是我最近好久没来逛的原因啊，你那分享的我在异次元看到过
        
        Jager 2014-5-14 · 21:24
        
        是仿异次元百度分享工具条，今天才加上的，费了不少力。
        
        三日月 2014-5-14 · 21:24
        
        这个是挺不错的。把要的整合到一起
    - 小残博客 2014-11-25 · 20:31
      
      发现:使用第二种方法后打开新建的页面一片空白
      - Jager 2014-11-26 · 9:06
        
        那应该是php代码错误造成白板。
        
        小残博客 2014-11-26 · 11:53
        
        用下源码包里面打包文件里面的说明文本里面的代码后测试正常可是出现上方有一块白板另外用那个网站底部的随机文章发现不显示阅读次数希望帮忙解决下。谢谢。
        
        Jager 2014-11-26 · 12:58
        
        建议用html代码，效率更好
        不显示阅读可能和使用的阅读统计插件不同有关系，不是post_views吧
小清新头像吧 2014-5-15 · 17:27

关注下了哈。。
迷你博客 2014-5-18 · 0:32

卡卡，看着有点心动，就怕影响加载速度啊..现在我博客有点不稳定打开速度也一般,不敢做太多影响速度的操作了。
- Jager 2014-5-18 · 7:58
  
  完全不会影响博客速度，只是一个单页面，影响不了全局的
  - 迷你博客 2014-5-18 · 18:40
    
    那就好，后面有需要按你的去调用，到进有问题再请教。
    - Jager 2014-5-18 · 18:42
      
      嗯，好的，我是弄给自己看的，听听歌不错。
球球 2014-5-20 · 18:08

看起来不错哦
毛成勇 2014-5-24 · 16:57

本来很简单的，博主搞得太复杂了~
- Jager 2014-5-24 · 17:10
  
  此话怎讲？
刘海江 2014-5-24 · 18:49

特地前来看奇葩的。。。。。哈哈
刘海江 2014-5-24 · 18:50

审阅完毕绝对是奇葩
Im Xiao 2014-6-7 · 18:47

我自己搞了个百度随身听的页面。你的JS封装不错。
- Jager 2014-6-7 · 19:49
  
  我现在这些js封装过的页面，都已正常收录，效果不错。
  - 我爱书籍 2015-4-30 · 21:46
    
    支持呵呵不错的工具
人生 2014-9-1 · 10:22

我想问一下我在我的网站上装怎么没有用
- Jager 2014-9-1 · 20:55
  
  我看你网站可以用呢~~
  - 人生 2014-9-1 · 20:58
    
    刚刚修改了一下
    - Jager 2014-9-1 · 20:58
      
      嗯，能用就好~常交流。
      - 人生 2014-9-1 · 21:29
        
        现在有个新的问题，qq音乐和kuogo在ie浏览器没用
        
        人生 2014-9-1 · 21:29
        
        帮我看看。谢谢
        
        Jager 2014-9-1 · 21:30
        
        你看我的在IE能不能用，不能用的话，那就是一样的问题了。
        
        人生 2014-9-1 · 21:37
        
        你的不能用呀
        
        Jager 2014-9-1 · 21:47
        
        不想折腾ie兼容性了，有兴趣你自己去弄好了。
FM 2014-11-4 · 18:59

在你这里学习到很多东西！真心感谢！
回梦无痕 2015-3-8 · 18:04

少了个
- Jager 2015-3-8 · 18:46
  
  什么？
  - 回梦无痕 2015-3-8 · 22:39
    
    代码少了个/style
    被过滤了。。
知言 2015-6-8 · 18:16

谢谢分享出来，很喜欢这个功能，一开始看了源码没懂，现在知道了谢啦签到成功！签到时间：18:12:44，每日签到，生活更精彩哦~
知园博客 2015-6-9 · 20:54

哈，不错！
Liangge 2015-8-10 · 22:18

你好请教一下我按照你的方法上传到EMLOG博客模版目录不管用，传到emlog根目录或创建二级目录打开都是404错误，请教是上面问题？
牧羊人 2015-9-6 · 15:05

Thanks

已搞好。
john 2015-11-19 · 15:59

博主，你好，看了你的博客，更加坚定了学习的勇气，刚才下载在线影音的代码，怎么下载不了呢，希望博主看看，
Simplexity 2016-1-6 · 4:44

谢谢博主，已搞定！
- 半醒 2016-9-16 · 0:50
  
  签到成功！签到时间：22:51:15 GMT+0800 (ä¸å½æ åæ¶é´)，每日签到，生活更精彩哦~

分享张戈博客的在线影音源代码

一、傻瓜式通用版（适合所有建站程序）

二、WordPress 的制作方法

解决百度搜索出现安全中心提醒

由电信宽带封堵443端口引发的一系列折腾

张戈博客使用CloudFlare CDN加速的经验技巧分享

解决升级WordPress 5.1后回复评论框不跟随、页面刷新问题