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="https://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="https://player.bilibili.com/player.html?aid=24687507&cid=41510047&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="https://player.bilibili.com/player.html?aid=22025564&cid=36402353&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="https://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后真是垮掉的一代啊啊啊啊……现在的年轻人,女生(有些甚至是男扮女装)穿裙子的标准长度,居然是以一扭屁股就能露出安全裤为标准的长度!对于未成年的小男生来说,根本不存在戒撸的可能性了啊!什么叫心理下流看什么都下流?天天靠露安全裤博眼球,自己出于什么心理真的没个数么?当然,从宏观上看,因为三十年前那一拨国策,搞得现在女少男多,按照市场规律:在绝对刚需的情况下,物以稀为贵! 现在社会整体上,女性的权利空前的大,这是无法改变的。既然无法改变,不妨转变一个角度看问题,适龄女性比适龄男性少,当今女性的裙子又比过去女性的裙子短,显然卫生纸的市场需求量,势必越来越大,而卫生纸的上游行业(木材,芦苇等造纸原材料的行业),及同类行业(软装、纸箱、办公用纸等与卫生纸消耗同样原料的行业)价值必将一路上扬!如果有搞期货或者炒股票的兄弟觉得有道理,入手一些这种行业的证券,肯定稳赚啊!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • django2用iframe标签完成网页内嵌播放b站视频功能

    前言: 给自己的网站中加入视频资源,有两种方法,一种是用iframe标签引用外站资源,另一种则使用video标签,获取站内资源进行视频播放.其中前者顾名思义,是将视频资源上传到视频网站中,然后通过引用的方式在站内播放视频,这种方法适用于视频资源内容公开免费,且不想花钱购买七牛云空间的开发者,毕竟是免费的嘛!而后者,则是需要有云空间存放视频资源才可以,不过后者的好处是,可以用于视频付费内容的开发. 今天恰好遇到了给自己要开发的项目,加一段视频新闻公告的需求!既然是新闻公告内容,当然是不需要加密的了

  • JS动态修改iframe内嵌网页地址的方法

    本文实例讲述了JS动态修改iframe内嵌网页地址的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过修改iframe的src属性动态修改iframe的内嵌网页 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myframe").src="http://google.com"; }

  • 手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

    本文实例讲述了CKEDITOR 4 实现Dialog 内嵌 IFrame操作.分享给大家供大家参考,具体如下: 在上一篇博文<CKEDITOR 4 扩展插件制作>中,姜哥跟大家探讨了在ckeditor中添加dialog,已经添加dialog的一些控件,最终将控件中的值插入到ckeditor编辑器中的过程.但是实际上,我们更多的应用,还是会在dialog中,添加iframe组件,直接引用外部网页,以实现更为复杂的功能.今天姜哥就和大家一起分享一下,这个开发过程. 继续我们上一个工程中的例子,我们

  • vue内嵌iframe跨域通信的实例代码

    目录 vue内嵌iframe跨域通信 1.Vue组件中如何引入iframe? 2.vue如何获取iframe对象以及iframe内的window对象? 3.vue如何向iframe内传送信息? 4.iframe内如何向外部vue发送信息? vue内嵌iframe跨域通信 1.Vue组件中如何引入iframe? <template> <div class="act-form"> <iframe :src="src"></ifr

  • jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

    iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之. 然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html): <!DOCTYPE html> <html xmlns="htt

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • 详解微信小程序与内嵌网页交互实现支付功能

    上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究,总算打通了两边的交互. 大概流程 1.先说明涉及到的文件,下面会用到 1.1 app.js:小程序的app.js文件,在globalData里定义一个全局变量paySuccessUrl: '',用来保存支付成功跳转url 1.2 wxminiwebview.js:小程序中放web-view的界面 1

  • python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例

    这几天研究了下PyQt5中QWebEngineView内嵌网页与Python的数据交互,今天把实例方法与代码发布出来供大家参数 数据交互需要load进一个网页,这里我选择load进一个本地html网页:JSTest.html. 同时,QWebEngineView与外面的交互还需要Qt官方提供的一个js文件:qwebchannel.js,这个文件可以在网上下载. JSTest.html和qwebchannel.js两个文件放在同一个目录下,我这边都是放在Python工程目录下. qwebchann

  • vue中内嵌iframe的src更新页面未刷新问题及解决

    目录 vue内嵌iframe的src更新页面未刷新 原因 解决 iframe的src指向的内容不刷新的解决方法之一 总结 vue内嵌iframe的src更新页面未刷新 vue中,系统使用iframe内嵌了其他系统的页面,iframe的src修改了,但是iframe内部页面内容未更新,也未请求接口. 原因 iframe的src中如果带hash #,src改变是不会刷新的. 解决 方式一:可以在 # 号前加一个随机数或者时间戳,但这种方式会改变url:方式二:在组件上加key,强制刷新页面. 方式一

  • 符合W3C网页标准的iframe标签的使用方法

    网站想改版,其中有一种广告的问题,以前每投放一个广告我都要把全站的文章都要更新一遍,这样既不便又不好!把网站以前推荐的一些文章都改成现在推荐的几个了!而且还浪费了我的时间.所以想使用Iframe来实现,但是直接使用iframe又不符合标准,那么该如何使用才能符合W3C的标准呢? 直接使用"IFRAME"不符合"W3C网页标准" 用JS来实现iframe 的标准化. 一.建立一个JS文件,代码如下: 复制代码 代码如下: function ifr(url,w,h){d

随机推荐