如何将Youtube视频整合到Django应用程序中

DebugUsery
361 阅读5分钟

将Youtube视频集成到Django应用程序中

现代组织、博客、公司和品牌，都在他们的网站上同时展示图片和视频，以加强他们的内容和推广他们的YouTube频道。

这非常方便，因为使用YouTube，与直接上传视频不同，可以节省空间、成本和兼容性问题。了解如何使用Django实现这一点很重要。这是因为Django正在迅速崛起。

我们将创建一个简单的博客应用，并在其中嵌入youtube视频，这样当我们写博客时，就可以在其中加入youtube视频。

前提条件

  1. 安装并设置好python 3的编程环境。
  2. 有一些关于python和Django框架的基本知识。

第1步：设置环境

我们将首先创建一个包含我们项目的目录。

打开命令行，输入以下命令。

mkdir projectX

将你的当前目录改为projectX。

cd projectX

然后创建并激活虚拟环境.venv ，这将帮助我们把我们的项目和它的所有依赖关系与我们计算机中的其他项目隔离开来。

在windows下的创建过程将如下。

py -m venv .venv

对于激活。

.venv\Scripts\activate.bat

第2步：下载所需软件包

我们可以使用以下命令同时安装Django和Django-embed-video。

pip install django django-embed-video

Django是Django框架包，而Django-embed-video是Django应用程序，它使嵌入Youtube、Vimeo的视频和soundcloud的音乐变得简单。

第3步：创建Django项目

使用以下命令创建一个Django项目。

django-admin startproject demo

改变目录为Demo。

cd demo

创建一个Django应用程序。

py manage.py startapp blog

第4步：设置后端

4.1:注册应用程序

在settings.py ，在INSTALLED_APPS ，添加我们的新应用embed_video和blog。

INSTALLED_APPS = [
#...
'embed_video',
'blog',
]

4.2:创建模型

在models.py 中创建以下模型，记得要进行必要的导入EmbedVideoField ，如下图所示。

from  embed_video.fields  import  EmbedVideoField
#Create your models here.
class  tutorial(models.Model):
	tutorial_Title = models.CharField(max_length=200)
	tutorial_Body = models.TextField()
	tutorial_Video = EmbedVideoField()

	class  Meta:
		verbose_name_plural = "Tutorial"

	def  __str__(self):
		return  str(self.tutorial_Title) if  self.tutorial_Title  else  " "

tutorial 类是我们创建模型的地方。在Meta 类中，我们告诉Django我们模型的复数名称（如果有不止一个对象）。

__str__ 函数确保我们的对象在Django管理中以其名称属性列出，即教程应根据其tutorial_Title 。

然后分别运行以下命令来进行迁移，并迁移我们的模型。

py manage.py makemigrations

py manage.py migrate

makemigrations 告诉Django存储在我们模型中的新变化， 告诉Django将这些变化应用到数据库中。migrate

4.3:注册模型

为了能够使用Django admin来访问我们的模型，我们必须在admin.py 中注册我们的模型。

导入AdminVideoMixin 和tutorial 然后注册你的模型，如下图所示。

from  embed_video.admin  import  AdminVideoMixin
from .models  import  tutorial
#Register your models here.

class  tutorialAdmin(AdminVideoMixin, admin.ModelAdmin):
	pass

admin.site.register(tutorial, tutorialAdmin)

4.4:创建视图

我们将需要两个视图，即。blog，和blog_detail 。当请求blog.html ，博客将负责获取所有的对象。

Blog_detail将负责在blogdetail.html 被请求时获取一个特定对象的内容。

在views.py:

from .models  import  tutorial
#Create your views here.

def  blog(request):
	Tut = tutorial.objects.all()
	context = {
	'Tut': Tut,
	}
	return  render(request, 'blog.html', context)

def  blog_detail(request,pk):
	Tut = tutorial.objects.get(pk=pk)
	context = {
	'Tut': Tut,
	}
	return  render(request, 'blogdetail.html', context)

blog() 中的Tut获取所有对象，在本例中是所有创建的教程，而blog_detail() 中的Tut获取与请求的id相匹配的特定教程，本例中是pk

4.5: 配置URL

在urls.py ，在demo 目录下，我们将把根URLconf 指向blog.urls 模块。

记住要为from django.urls import path, include 添加一个导入。

from  django.urls  import  path, include # new

urlpatterns = [
	path('', include('blog.urls')),  #new
	path('admin/', admin.site.urls),
]

我们用include() 来引用blog.urls 。

然后在你的博客目录下创建另一个urls.py 文件，然后将url指向它们相应的视图，如下图所示。

from  django.urls  import  path
from .import  views

urlpatterns =[
path('', views.blog, name= 'blog'),
path('<int:pk>/', views.blog_detail, name='blog_detail'),
]

4.6:创建超级用户账户

超级用户账户将使我们能够以管理员的身份登录我们的网站，发布、更新或删除博客。

要创建一个超级用户账户，请使用下面的命令，它将提示你输入用户名、电子邮件和密码。

py manage.py createsuperuser

第5步：前台

在blog 目录中创建一个新的目录，命名为templates ，然后在其中创建三个文件，命名为base.html,blog.html, 和blogdetail.html 。

在base.html ，我们将添加主要的HTML代码，该代码是由blog.html 和blogdetail.html 共享的。

在base.html 中添加以下代码。

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- Bootstrap CSS -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
			crossorigin="anonymous"
		/>

		<title>Hello, world!</title>
	</head>
	<body>
		<div class="container-fluid">
			<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
				<div class="container-fluid">
					<button
						class="navbar-toggler"
						type="button"
						data-bs-toggle="collapse"
						data-bs-target="#navbarTogglerDemo03"
						aria-controls="navbarTogglerDemo03"
						aria-expanded="false"
						aria-label="Toggle navigation"
					>
						<span class="navbar-toggler-icon"></span>
					</button>
					<a class="navbar-brand" href="#">BLOG</a>
					<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
							<li class="nav-item">
								<a
									class="nav-link active"
									aria-current="page"
									href="http://127.0.0.1:8000/"
									>Home</a
								>
							</li>
						</ul>
					</div>
				</div>
			</nav>

			{% block page_content %}{%endblock%}
		</div>

		<!-- Option 1: Bootstrap Bundle with Popper -->

		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
			crossorigin="anonymous"
		></script>
	</body>
</html>

在blog.html ，我们将显示所有将被添加的教程，但我们将只以列表方式显示标题和一小部分教程正文。

{% extends 'base.html' %}

	{% block page_content %}

	<div  class="col-md-8 offset-md-2">
		<h1>Blog Index</h1>
		<hr>
		{% for t in Tut %}
		<h2><a  href="{% url 'blog_detail' t.pk %}">{{ t.tutorial_Title}}</a></h2>
		<p>{{ t.tutorial_Body | slice:':400' }}...</p>
		{% endfor %}
	</div>

	{%endblock%}

在blogdetail.html ，我们将显示所选教程的标题、正文和一段视频。

{% extends 'base.html' %} {% load embed_video_tags %}
{% block page_content %}

	<div  class="col-md-8 offset-md-2">
		<h1>{{ Tut.tutorial_Title }}</h1>
		<p>{{ Tut.tutorial_Body | linebreaks }}</p>
		<h3>Here is the video:</h3>

		{% video Tut.tutorial_Video 'tiny' %}

	</div>

{%endblock%}

标签{% video Tut.tutorial_Video 'tiny' %} ，负责渲染我们的YouTube视频。

视频可以按以下不同尺寸呈现。

  • 小(420x315)
  • 小型(480x360)
  • 中(640x480)
  • 大(960x720)
  • 巨型 (1280x960)

{% video Tut.tutorial_Video 'huge' %} 可用于巨大的视频。

如果默认的尺寸不符合我们的要求，我们也可以为视频设置自定义尺寸。例如，{% video Tut.tutorial_Video '600x400' %} 。

第6步：测试我们的应用程序

现在我们已经设置好了一切，我们可以运行我们的应用程序。

使用下面的命令来运行服务器。

py manage.py runserver

然后登录到管理网站，添加一些假的教程用于测试。

My admin site after adding a few tutorials

My homepage after adding some tutorials

下面是我的假教程的样子。

My dummy tutorial

总结

通过这篇文章，我们创建了一个Django应用程序，在其中加入了一个youtube视频。我们已经经历了如何使用Django框架将Youtube视频嵌入项目的简单步骤。

avatar
文章
阅读
粉丝