专栏首页张戈的专栏分享张戈博客的在线影音源代码

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

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

此页面用到了 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="http://static.zhangge.net/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="http://zhangge.net/" 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('http://zhangge.net/online','在线影音|张戈博客')"><span style="color: #00FFFF">&nbsp; 亲,点此收了我吧!</span></a>
    </div>
</div>
<script type="text/javascript" src="http://static.zhangge.net/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 即可看到效果

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

文件下载

百度网盘

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【 ES 私房菜】收集 Nginx 访问日志

    在上一篇系列文章《【 ES 私房菜】收集 Apache 访问日志》中,我们已经完成了 ES 收集 A pache 日志的目标,再收集其他 WEB 日志也就小菜一...

    张戈
  • 解决WordPress升级4.2后调用国外图片导致大量404请求的问题

    前几天就收到 WordPress 官方发来的预更新通知,告诉我本周会更新到 4.2。果然,昨天就收到了更新推送消息,随手就点击升级了,前台打开看了下没有看到明显...

    张戈
  • WordPress评论ajax动态加载,解决静态缓存下评论不更新问题

    这是一个历史遗留问题,自从博客部署了 PHP 纯静态缓存之后,所有页面都是 html 静态内容了,而且在七牛 CDN 静态分离之后,速度更是达到极致! ? 不过...

    张戈
  • python笔记42-http请求命令行工具(httpie)

    通常我们需要快速的测试某个接口通不通,一般linux上用curl去发http请求,但是这个命令行工具语法有点复杂了,不够直观。 python有一个给人类使用的r...

    上海-悠悠
  • TiDB 源码阅读系列文章(二)初识 TiDB 源码

    本文为 TiDB 源码阅读系列文章的第二篇,第一篇文章介绍了 TiDB 整体的架构,知道 TiDB 有哪些模块,分别是做什么的,从哪里入手比较好,哪些可以忽略,...

    PingCAP
  • AngularJS实现跨域请求

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 《颠覆你的 Python 接口自动化测试》05 - Python 操作 HTTP 请求

    看了 @倔强的潇洒小姐 的发送http问题汇总的文章,也有类似的报错。 看了下她的解决方法,发现我在mysql.py文件里已经设置过了 ...

    caoqi95
  • Dubbo爆出严重漏洞! 可远程执行恶意代码!(附解决方案)

    近日检测到Apache Dubbo官方发布了CVE-2019-17564漏洞通告,360灵腾安全实验室判断漏洞等级为高,利用难度低,威胁程度高,影响面大。建议使...

    用户6543014
  • http编程系列(一)——URL使用和爬取博客图片小DEMO

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • perl模块安装大全

    今天又有小伙伴微信问我perl模块安装的问题,因为ENSEMBL发布的大多数数据库以及软件都是基于perl的,尤其是分量很重的VEP,所以即使你再如何如何的讨厌...

    生信技能树

扫码关注云+社区

领取腾讯云代金券