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

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

此页面用到了 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 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

网页PPT: reveal.js 介绍

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

62820
来自专栏前端架构与工程

前后端分离和模块化-58到家微信首页重构之路

微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题: 每个城...

27180
来自专栏GopherCoder

Django:web框架的学习(3)

17330
来自专栏FreeBuf

偏执的iOS逆向研究员:收集全版本的macOS iOS+越狱+内核调试

Intro 虽然“只有偏执狂才能够生存”这句话已经被假药停给毁了,但是作为一只有逼格的高大上的iOS逆向分析研究员,难道如果有现成的macOS/iOS全版本镜像...

51670
来自专栏快乐八哥

Single Page Application概览

第一点 :传统web应用遇到的2个问题 1.User Experience 用户体验 2.Performance 性能问题 SPA如何解决这些问题的: 不重新加...

20170
来自专栏hotqin888的专栏

Merit价值和成果管理系统——1侧栏与iframe

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

13820
来自专栏阮一峰的网络日志

搭建了一个图片库

但是,事实上,这个网志的所有图片链接都是有效的,没有一个链接是坏的。无法显示只是因为被屏蔽了,只要你不在中国大陆,所有图片都能看到。

1K30
来自专栏Web 开发

Mac下面的IE8测试环境

微软提供的IE测试虚拟机里面,Window7的自带的最小版本IE是IE8,so,从IE8测试走起。Vista是个短命的产品,至于XP,让他退役吧。

17100
来自专栏天天P图攻城狮

iOS基础开发实践:iMessage Extension浅析

30520
来自专栏上善若水

P003PHP之用户页面注册信息填写页面[转]

php用户注册页面填写信息完整实例,内容包括邮箱自动匹配、密码强度验证以及防止表单重复等.

18730

扫码关注云+社区

领取腾讯云代金券