django2 用iframe标签完成 网页内嵌播放b站视频功能
前言:
给自己的网站中加入视频资源,有两种方法,一种是用iframe标签引用外站资源,另一种则使用video标签,获取站内资源进行视频播放。其中前者顾名思义,是将视频资源上传到视频网站中,然后通过引用的方式在站内播放视频,这种方法适用于视频资源内容公开免费,且不想花钱购买七牛云空间的开发者,毕竟是免费的嘛!而后者,则是需要有云空间存放视频资源才可以,不过后者的好处是,可以用于视频付费内容的开发。
今天恰好遇到了给自己要开发的项目,加一段视频新闻公告的需求!既然是新闻公告内容,当然是不需要加密的了。所以,也就没有必要花钱搞个云空间了。果断选择第一种,使用iframe标签的方式来实现网页内嵌播放视频方式来开发!
1.选择视频网站进行视频引用:
1.爱奇艺的视频加广告加得简直丧心病狂,像老太太的裹脚布又臭又长,垃圾,不用!
2.腾讯视频的视频也加广告,虽然广告没有那么长,但是很阴险的是,如果视频超过十几分钟,就会无法在引用视频的网站播放,被强制要求转去腾讯视频才可以看,简直狼子野心,垃圾中的垃圾,不用!
3.bilibili,也就是传说中的b站,不但视频没有广告(引导型广告还是有的,但是不影响观看,不是那种不看完广告不让看视频的霸王硬广),没有玩儿阴的强制跳转去他家网站,还高清无码有弹幕,选b站!
2.实际操作:
1.在template目录下的index.html中加入跟视频引用相关的代码:
<!--视频 S-->
<div class="videoCon">
<div class="name" style="color: orangered">新闻公告</div>
<div class="videoF">
<!--这里填入从b站随机挑选一个视频,然后获取的引用代码-->
<iframe src="//player.bilibili.com/player.html?aid=24841101&cid=41877807&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
<!---->
</div>
</div>
<!--视频 E-->
2.获取b站的视频引用相关代码(随机挑选一个b站视频,进入视频播放页)

3.django网页中的效果图

3.跟django后端结合,动态的嵌入不同视频
1.在models.py中(一般嵌入代码长度不会超过300,在150——300之间)
class Bili(models.Model):
'''新闻相关视频'''
new=models.ForeignKey(News,verbose_name='新闻公告',on_delete=models.CASCADE)
is_topline=models.BooleanField(default=False,verbose_name='是否是头条')
bili=models.CharField(verbose_name='视频嵌入代码',max_length=300)
add_time = models.DateTimeField(default=datetime.now, verbose_name='添加时间') class Meta:
verbose_name = '新闻相关视频'
verbose_name_plural = verbose_name def __str__(self):
return self.new.title
打开Terminal终端,执行数据更新命令:
python manage.py makemigrations
python manage.py migrate
2.在adminx.py中注册
import xadmin
from .models import News,Bili class NewsAdmin(object):
list_display = ['title', 'img','click_num','add_time']
search_fields = ['title', 'img','click_num',]
list_filter = ['title', 'img','click_num','add_time']
style_fields={'context':'ueditor'} #注册代码
class BiliAdmin(object):
list_display = ['new', 'is_topline']
search_fields = ['new', 'is_topline']
list_filter =['new', 'is_topline'] xadmin.site.register(News, NewsAdmin)
#注册代码
xadmin.site.register(Bili, BiliAdmin)
3.可以在xadmin后台进行多个视频嵌入代码的填入
随机在b站找的三个视频的嵌入代码:
<iframe src="//player.bilibili.com/player.html?aid=24687507&cid=41510047&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="//player.bilibili.com/player.html?aid=22025564&cid=36402353&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="//player.bilibili.com/player.html?aid=17766502&cid=29007139&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>


4.在views.py中:
from .models import News,Bili class NewView(View):
"""新闻公告详情"""
def get(self,request,new_id):
new=News.objects.filter(id=new_id).first()
new.click_num+=1 # 根据新闻公告的不同,显示与之关联的视频
bili=Bili.objects.filter(new=new).last() new.save()
return render(request,'news-base.html',{'new':new,'bili':bili}) class IndexView(View):
"""首页"""
def get(self,request):
all_news=News.objects.all().order_by('-add_time') p = Paginator(all_news, 20)
page = request.GET.get('page', 1)
try:
news = p.page(int(page))
except PageNotAnInteger:
news = p.page(1) #首页播放被标记为头条的最后一部视频
bili=Bili.objects.filter(is_topline=True).last() return render(request,'index.html',{'news':news,'bili':bili})
5.改写Template目录下的index.html(首页)和new-base.html(新闻模板页)
index.html
<!--视频 S-->
<div class="videoCon">
<div class="name" style="color: orangered">新闻公告</div>
<div class="videoF">
{{ bili.bili|safe }}
</div>
</div>
<!--视频 E-->
new-base.html
<!--视频 S-->
<div class="videoCon">
<div class="name" style="color: orangered">{{ new.title }}</div>
<div class="videoF">
{{ bili.bili|safe }}
</div>
</div>
<!--视频 E-->
6.效果图
新闻详情页

首页

4.总结
这个功能其实还是挺简单的,技术上没有什么可总结的,只不过我在随机在b站找几个视频,发现基本上所有的视频内容吧,都挺令人担忧的,b站作为体现年轻人喜好的一个网站,其中内容全都是以低俗,谄媚,秀下限,恶趣味,宅腐文化为主旋律的,作为一个90后,不禁叹息,00后真是垮掉的一代啊啊啊啊……现在的年轻人,女生(有些甚至是男扮女装)穿裙子的标准长度,居然是以一扭屁股就能露出安全裤为标准的长度!对于未成年的小男生来说,根本不存在戒撸的可能性了啊!什么叫心理下流看什么都下流?天天靠露安全裤博眼球,自己出于什么心理真的没个数么?当然,从宏观上看,因为三十年前那一拨国策,搞得现在女少男多,按照市场规律:在绝对刚需的情况下,物以稀为贵! 现在社会整体上,女性的权利空前的大,这是无法改变的。既然无法改变,不妨转变一个角度看问题,适龄女性比适龄男性少,当今女性的裙子又比过去女性的裙子短,显然卫生纸的市场需求量,势必越来越大,而卫生纸的上游行业(木材,芦苇等造纸原材料的行业),及同类行业(软装、纸箱、办公用纸等与卫生纸消耗同样原料的行业)价值必将一路上扬!如果有搞期货或者炒股票的兄弟觉得有道理,入手一些这种行业的证券,肯定稳赚啊!
觉得有道理的,来打赏5元支持一下啊?
django2 用iframe标签完成 网页内嵌播放b站视频功能的更多相关文章
- HTML-图片热点、网页内嵌、网页拼接、快速切图
图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- 网页内嵌html遇到的问题
在项目中遇到个问题 充值功能是点击一个按钮这个按钮会弹出模态框,输入充值金额会执行一段脚本自动提交数据到https://openapi.alipay.com/gateway.do上 结果:本网页跳转到 ...
- 如何解决Angular网页内嵌推特时间线无法正常显示
我最近解决了一个折磨了我好久但是解决方法却只是添加两三行代码的问题.我没有在网上找到合适的解决方案,最后是我根据官方网站和很多的帖子里的部分代码得到的启发,尝试了很久之后得到的解决方法.因为过程实在是 ...
- ios平台appstore不支持网页内嵌app解决方案
苹果一直拒绝 UIWebView 内嵌 HTML5 页面的 iPhone.iPad APP应用上架到 App Store,建议这样的APP去做成Safari的Web应用.但是,苹果的审核人员只从界面. ...
- 【转】浅谈html5网页内嵌视频
转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html
- app内嵌H5的上传图片的功能
1.上传组件 <!-- - hasBorder {Boolean} cell底部边框,oneline 为 true 有效 - inlineBorder {Boolean} cell底部短边框 - ...
- form表单以及内嵌框架标签
今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...
- [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签
一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...
随机推荐
- python之路--初识面向对象
一 . 初识面向对象 面向过程: 一切以事务的发展流程为中心. 面向对象: 一切以对象为中心. 一切皆为对象. 具体的某一个事务就是对象 打比方: 大象进冰箱 步骤: 第一步, 开门, 第二步, 装大 ...
- python之if使用方法举例
if使用方法举例: import random #随机生成1-100的整数 n = random.randint(1, 100) if n > 50: print(n, "> 5 ...
- python与java的内存机制不一样;java的方法会进入方法区直到对象消失 方法才会消失;python的方法是对象每次调用都会创建新的对象 内存地址都不i一样
python与java的内存机制不一样;java的方法会进入方法区直到对象消失 方法才会消失;python的方法是对象每次调用都会创建新的对象 内存地址都不i一样
- 前端动态属性页面的 要用id做name 因为这样方便在提交表单时候取到值
前端动态属性页面的 要用id做name 因为这样方便在提交表单时候取到值
- codeforces24D
CF24D Broken robot 题目背景 小小迪带你吃瓜 题目描述 给出一个 n×m 的矩阵区域,一个机器人初始在第 x 行第 y 列,每一步机器人会等概率 的选择停在原地,左移一步,右移一步, ...
- 搭建Hexo博客(二)-连接github
没有github账号先需要创建账号,地址:https://github.com/join?source=header 有账号的看下面: 1.创建repo 创建一个repo,名称为yourname.gi ...
- Github提交本地代码
第一步:建立git仓库 cd到你的本地项目根目录下,执行git命令 git init 第二步:将项目的所有文件添加到仓库中 git add . 如果想添加某个特定的文件,只需把.换成特定的文件名即可 ...
- Codeforces478D-Red-Green Towers-DP
不是特别难的一道dp题. 给r个红块,g个绿块,计算这些块能磊出的最高塔的方案数. 塔的每一层都比上一层多一块,每一层只能有一种颜色. dp[i][j]表示第i层,j个红块的方案数. 则dp[i][j ...
- P1601 A+B Problem(高精)
原题链接 https://www.luogu.org/problemnew/show/P1601 这个题提示的很清楚,并非简单的A+B,单纯的long long型也不行(不要被样例所迷惑).因为lo ...
- wstngfw IKEv2服务器配置示例
wstngfw IKEv2服务器配置示例 移动客户端的服务器配置有几个组件: 为***创建一个证书结构 配置IPsec移动客户端设置 为客户端连接创建阶段1和阶段2 添加IPsec防火墙规则 创建** ...
