网站建设

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

Jager · 5月12日 · 2014年 · · 955次已读

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

此页面用到了 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 条回应
  1. PHP二次开发 2014-5-12 · 21:37

    这个还不错,可以娱乐一下。

    • avatar
      Jager 2014-5-13 · 9:36

      我老婆喜欢看~哈哈

  2. 凌吉林 2014-5-12 · 22:21

    啥时候想在博客弄点影音,再到你这里来取经

    • avatar
      Jager 2014-5-12 · 22:22

      嗯,好的

  3. 王光卫中文博客 2014-5-12 · 22:32

    现在插件挺多的,但是没这个简洁

    • avatar
      Jager 2014-5-12 · 22:36

      第一个是纯静态,应该比插件还好很多。

  4. 萌妹 2014-5-12 · 23:07

    额,感觉我的空间本来就好慢。。等换服务器了 试试影音

    • avatar
      Jager 2014-5-12 · 23:13

      感觉你博客也不慢呢

      • 萌妹 2014-5-12 · 23:16

        本来是用七牛的 结果用七牛间歇爆500错误 然后卸载了 唉 好烦 流量又不够用了

        • avatar
          Jager 2014-5-12 · 23:20

          七牛的解析有时候有问题。

          • 萌妹 2014-5-12 · 23:23

            原来是这样啊 难怪我用求牛就偶尔500 错误 偶尔又很好 不过能剩好多流量 可惜了

  5. 瑾瑜 2014-5-13 · 0:31

    这个挺好,想看电视时方便了。

    • avatar
      Jager 2014-5-13 · 9:05

      恩,其实也是自娱自乐,另外就是方便家人看看在线电视什么的。

  6. APP雄起 2014-5-13 · 1:52

    这个不错

    • avatar
      Jager 2014-5-13 · 9:36

      可以试试~哈哈

  7. 夏日博客 2014-5-13 · 9:43

    这个貌似也是直接代码调用的吧。

    • avatar
      Jager 2014-5-13 · 9:58

      是框架调用,不过我用js封装了,SEO方面没事。

  8. maillot radioshack 2014-5-13 · 10:14

    唔,我打酱油好了。

  9. 多姿女性 2014-5-13 · 12:54

    来向老大们学习

  10. 小鱼儿的家 2014-5-13 · 17:09

    我主题自带了网络电视模块也挺不错的,只是不怎么用就没有搞,你这个也不错,赞一个

    • avatar
      Jager 2014-5-13 · 18:44

      我一会就去看看。

  11. leiboy 2014-5-13 · 19:03

    现在基本上都看盒子或智能电视了

    • avatar
      Jager 2014-5-13 · 19:06

      嗯,有盒子谁还看这个啊。。。算是屌丝的自娱自乐吧。丰富一下网址。反正我每天都是在这里听音乐电台。

      • leiboy 2014-5-13 · 19:33

        嗯,这种页面前几年很流行

  12. 百家网络博客 2014-5-14 · 15:19

    易视速度不是很好

    • avatar
      Jager 2014-5-14 · 16:52

      恩,有时候要卡很久,我一般用这个听歌。

  13. Brainu 2014-5-14 · 16:44

    这个不错,先留着,以备用

    • avatar
      Jager 2014-5-14 · 16:54

      可以保存源码,

  14. 三日月 2014-5-14 · 21:14

    最近站点变化小大啊 [嘻嘻]

    • avatar
      Jager 2014-5-14 · 21:19

      加了广告。。

      • 三日月 2014-5-14 · 21:20

        广告估计被我的玩意屏蔽了,我觉得变化挺大的

        • avatar
          Jager 2014-5-14 · 21:21

          其他没啥变吧。

          • 三日月 2014-5-14 · 21:22

            还是我最近好久没来逛的原因啊,你那分享的我在异次元看到过

            • avatar
              Jager 2014-5-14 · 21:24

              是仿异次元百度分享工具条,今天才加上的,费了不少力。

              • 三日月 2014-5-14 · 21:24

                这个是挺不错的。把要的整合到一起

        • 小残博客 2014-11-25 · 20:31

          发现:使用第二种方法后打开新建的页面一片空白

          • avatar
            Jager 2014-11-26 · 9:06

            那应该是php代码错误造成白板。

            • 小残博客 2014-11-26 · 11:53

              用下源码包里面打包文件里面的说明文本里面的代码后测试正常 可是出现上方有一块白板 另外用那个网站底部的随机文章发现不显示阅读次数 希望帮忙解决下。 谢谢。

              • avatar
                Jager 2014-11-26 · 12:58

                建议用html代码,效率更好
                不显示阅读可能和使用的阅读统计插件不同有关系,不是post_views吧

  15. 小清新头像吧 2014-5-15 · 17:27

    关注下了哈。。

  16. 迷你博客 2014-5-18 · 0:32

    卡卡,看着有点心动,就怕影响加载速度啊..现在我博客有点不稳定打开速度也一般,不敢做太多影响速度的操作了。

    • avatar
      Jager 2014-5-18 · 7:58

      完全不会影响博客速度,只是一个单页面,影响不了全局的

      • 迷你博客 2014-5-18 · 18:40

        [哈哈] 那就好,后面有需要按你的去调用,到进有问题再请教。

        • avatar
          Jager 2014-5-18 · 18:42

          嗯,好的,我是弄给自己看的,听听歌不错。

  17. 球球 2014-5-20 · 18:08

    看起来不错哦 [威武]

  18. 毛成勇 2014-5-24 · 16:57

    本来很简单的,博主搞得太复杂了~

    • avatar
      Jager 2014-5-24 · 17:10

      此话怎讲?

  19. 刘海江 2014-5-24 · 18:49

    特地前来看奇葩的。。。。。哈哈

  20. 刘海江 2014-5-24 · 18:50

    审阅完毕 绝对是奇葩

  21. Im Xiao 2014-6-7 · 18:47

    我自己搞了个百度随身听的页面。你的JS封装不错。

    • avatar
      Jager 2014-6-7 · 19:49

      我现在这些js封装过的页面,都已正常收录,效果不错。

      • 我爱书籍 2015-4-30 · 21:46

        支持 呵呵 不错的工具

  22. 人生 2014-9-1 · 10:22

    我想问一下我在我的网站上装怎么没有用

    • avatar
      Jager 2014-9-1 · 20:55

      我看你网站可以用呢~~

      • 人生 2014-9-1 · 20:58

        刚刚修改了一下

        • avatar
          Jager 2014-9-1 · 20:58

          嗯,能用就好~常交流。

          • 人生 2014-9-1 · 21:29

            现在有个新的问题,qq音乐和kuogo在ie浏览器没用

            • 人生 2014-9-1 · 21:29

              帮我看看。谢谢

              • avatar
                Jager 2014-9-1 · 21:30

                你看我的在IE能不能用,不能用的话,那就是一样的问题了。

                • 人生 2014-9-1 · 21:37

                  你的不能用呀

                  • avatar
                    Jager 2014-9-1 · 21:47

                    不想折腾ie兼容性了,有兴趣你自己去弄好了。

  23. FM 2014-11-4 · 18:59

    在你这里学习到很多东西!真心感谢!

  24. 回梦无痕 2015-3-8 · 18:04

    少了个

    • avatar
      Jager 2015-3-8 · 18:46

      什么?

      • 回梦无痕 2015-3-8 · 22:39

        代码少了个/style
        被过滤了。。

  25. 知言 2015-6-8 · 18:16

    谢谢分享出来,很喜欢这个功能,一开始看了源码没懂,现在知道了谢啦签到成功!签到时间:18:12:44,每日签到,生活更精彩哦~

  26. 知园博客 2015-6-9 · 20:54

    哈,不错!

  27. Liangge 2015-8-10 · 22:18

    你好请教一下我按照你的方法上传到EMLOG博客模版目录不管用,传到emlog根目录或创建二级目录打开都是404错误,请教是上面问题?

  28. 牧羊人 2015-9-6 · 15:05

    Thanks

    已搞好。

  29. john 2015-11-19 · 15:59

    博主,你好,看了你的博客,更加坚定了学习的勇气,刚才下载在线影音的代码,怎么下载不了呢,希望博主看看,

  30. Simplexity 2016-1-6 · 4:44

    谢谢博主,已搞定!

    • 半醒 2016-9-16 · 0:50

      签到成功!签到时间:22:51:15 GMT+0800 (中国标准时间),每日签到,生活更精彩哦~