吸引用户的最好方法之一就是向他们展示个性化的内容. 一个很好的例子是 YouTube 基于之前观看的视频提出的视频建议. 另一个受欢迎的建议是, 亚马逊建议基于之前浏览过的产品来浏览类似的商品. 另一个例子是 Instagram 的方法, 当你搜索或探索时, 你可以选择显示哪些图片和视频.
你会学到什么
在本文中, 我们将带领您完成构建一个简单应用程序的步骤, 该应用程序根据用户最近上传的视频向用户推荐个性化的视频: 用户上传视频, 然后获得相关视频的提要. 为此, 我们将利用 Cloudinary 的视频播放器和他们的自动视频标签插件, 由谷歌提供支持.
你完成的应用程序会是这样的:
依赖关系
要构建这个应用程序, 我们将在后端使用节点服务器, 前端使用 vue. 要自己执行本教程, 请验证:
节点安装在您的计算机上
节点包管理器 (NPM) 安装已在您的机器上.
要验证您的安装, 请在您的终端中运行以下命令:
- node --version
- NPM --version
如果您得到的结果是版本号, 那么您可以按照本教程进行操作. 否则, 继续安装它们, 或者阅读下面的文章, 看看我们是如何做到的.
步骤 1: 使用 cloudinary 设置
Cloudinary https://cloudinary.com/ 是一个一站式的图像和视频管理商店, 包括操作, 优化和交付. 使用 Cloudinary, 您可以为自己节省额外的时间, 您本来可以花在开发与操纵和在应用程序中传输视频相关的各种功能上.
创建一个 Cloudinary 帐户: 按照这个链接 https://cloudinary.com/signup 注册.
成功注册到 Cloudinary 之后, 您将被重定向到仪表板 https://cloudinary.com/console , 在那里您可以看到您的 CLOUD_NAME,API_KEY 和 API_SECRET. 在本教程的后面, 您将需要这些值.
启用 "自动视频标记" 加载项
现在, 您可以将自动视频标签添加到您的帐户中. 继续注册免费层. 这允许您使用附加组件, 正如我们将在几个步骤中做的那样.
编辑受限制的图像类型
要允许 cloudinary 客户端在帐户上查询媒体以获取不同的标记, 需要确保在 cloudinary 帐户的 security 选项卡下的 restricted image types 中未选中 resource list 选项. 如果选中左键, 则无法在媒体库中查询视频标记.
步骤 2: 构建后端服务器
为了处理对 Cloudinary 的 API 调用, 我们将使用 express 服务器.
安装所需节点模块
我们需要以下节点模块:
CORS - 将在我们的应用程序上启用跨源资源共享
express - 将成为我们的 web 服务器
body parser - 将用于分析 JSON 请求的内容
连接 - 多方 - 将启用我们的应用程序上的多部分请求
cloudinary core - 处理 cloudinary 函数的 JavaScript 核心包
新建一个目录, 将目录改为:
mkdir video-suggestion && cd video-suggestion
然后安装节点模块
NPM install cors express body-parser connect-multiparty cloudinary-core
创建 server.JS 文件
现在, 我们需要创建一个文件, 它将包含我们的服务器在您的视频建议目录中工作所需的指令:
touch server.JS
这将是您在服务器运行时引用的启动文件. 在 server.JS 文件中, 需要导入上面安装的节点模块:
导入节点模块
- const cors = require('cors')
- const express = require('express')
- const cloudinary = require('cloudinary-core')
- const bodyParser = require('body-parser')
- const multipart = require('connect-multiparty')
- [...]
创建 express 应用程序
现在让我们通过在 server.JS 中添加以下内容来创建 express 应用程序:
- [...]
- const App = express()
- [...]
加载中间件
我们在服务器. JS 中加载中间件, 添加如下代码:
- [...]
- App.use(cors())
- App.use(bodyParser.JSON());
- App.use(bodyParser.urlencoded({
- extended: false
- }));
- const multipartMiddleware = multipart();
- [...]
使用上面的命令, 我们将应用程序设置为使用 cors. 我们还指示应用程序以 JSON 格式解析请求.
配置 Cloudinary 客户端
现在, 您需要使用 CLOUD_NAME,API_KEY 和 API_SECRET 配置我们的 Cloudinary 客户机. 当您登录到 Cloudinary 帐户时, 可以在仪表板 https://cloudinary.com/console 上找到这些值.
- [...]
- cloudinary.config({
- cloud_name: 'CLOUDINARY_CLOUD_NAME',
- api_key: 'CLOUDINARY_API_KEY',
- api_secret: 'CLOUDINARY_API_SECRET'
- });
- [...]
创建应用程序路径
我们的 App 有两条基本路线:
/upload - 上传用户的视频
/suggest - 获取用户感兴趣的视频类别
对于应用程序的上传部分, 我们使用 Cloudinary 客户机和视频, 当调用应用程序的上传路径时, 这些视频将作为 post 请求的一部分发送给我们. 然后将视频发送到 Cloudinary 媒体库.
在上传命令中, 我们还将 google_video_tagging 作为类别. 这将触发 auto_tagging 特性, 并将检测到的标记与我们的视频一起存储在媒体库中.
- [...]
- App.post('/upload', multipartMiddleware, function(req, res){
- // Upload video to cloudinary
- cloudinary.uploader.upload(req.files.video.path,
- function(result) {
- return res.JSON({
- 'status' : true
- })
- },
- { resource_type: "video", categorization: "google_video_tagging", auto_tagging: 0.4 });
- [...]
auto_tagging: 0.4 表示对检测到的标记使用的置信度.
为了获取用户上传的视频的检测标记, 我们使用 cloudinary 客户端获取资源类型为 "video" 的标记.
- [...]
- App.get('/suggest', multipartMiddleware,
- function(req, res) {
- cloudinary.v2.API.tags({
- resource_type: 'video'
- },
- function(error, result) {
- return res.JSON(result);
- });
- });
- [...]
配置应用程序端口
现在我们通过设置应用程序监听的端口来结束后端服务器:
- [...]
- let port = process.env.PORT || 3000;
- App.listen(port,
- function() {
- console.log('App listening on port' + port + '!');
- });
第三步: 构建前端
现在我们已经有了应用程序的后端, 我们需要构建应用程序面向用户的一面. 为此, 我们将使用 Vue https://vuejs.org/ .Vue 是一个渐进的 JavaScript 框架, 使用起来又快又简单.
安装 Vue
如果你已经安装了 Vue, 你可以通过运行:
vue --version
如果没有, 你可以安装 Vue CLI 运行:
NPM install --global vue-cli
要创建前端服务器, 请在前面步骤中创建的视频建议目录中运行以下命令:
vue init webpack frontend
安装节点模块
我们将使用 axios 从我们的 Vue 组件之一发出 get 请求, 因此如果没有它, 也需要安装它. 运行以下前端目录:
- cd frontend
- NPM install axios
创建上载组件
现在, 我们要创建负责上传视频的 Upload 组件.
cd frontend/src/components
touch Upload.vue
在 upload.vue 中, 我们需要导入 Axios 模块:
- <script>
- import axios from 'axios' [...]
然后我们描述组件本身:
- [...]
- export default {
- name: 'Upload',
- data () {
- return {
- video: null,
- loading: ''
- }
- },
- methods: {
- upload : function(files){
- this.loading = 'Video detected';
- this.video = files[0];
- },
- onSubmit: function(){
- // compile the form data
- const formData = new FormData();
- formData.append('video', this.video);
- this.loading = "Uploading...Please wait.";
- axios.post('http://localhost:3128/upload', formData)
- .then( res => {
- this.loading = 'Upload Complete!';
- })
- }
- }
- }
- </script>
上面的组件有两个方法 upload 和 onSubmit.upload 方法将上传的视频分配给它. 视频和 onSubmit 方法将视频添加到 formData 中, 然后将 post 请求发送到后端服务器的 / 上传路径.
组件将有一个模板, 看起来像这样:
- <template>
- <div class="container" style="margin-top:30px;">
- <div class="row">
- <form class="form-inline" enctype="multipart/form-data" @submit.prevent="onSubmit">
- <div class="form-group">
- <label for="">Video </label>
- <input type="file" class="form-control" accept="video/*"
- name="video" v-on:change="upload($event.target.files)">
- </div>
- <div class="form-group" style="margin-left: 20px;">
- <button class="btn btn-primary">Upload</button>
- {{ loading }}
- </div>
- </form>
- </div>
- </div>
- </template>
创建播放列表组件
现在已经上传了视频, 我们想为用户提供一个类似视频的播放列表. 为此, 我们将使用 Cloudinary 视频播放器:
- [...]
- <link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.CSS"rel="stylesheet">
- <script src = "https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js"
- type = "text/javascript">
- </script>
- <script src="https:/ / unpkg.com / cloudinary - video - player /
- dist / cld - video - player.min.JS "type="text / JavaScript "></script>
- [...]"
这将导入我们稍后需要的视频播放器样式和 JavaScript.
现在我们创建播放列表组件:
cd frontend/src/components
touch Playlist.vue
在 playlist.vue 中, 我们导入 Axios 模块:
- <script>
- import axios from 'axios' [...]
现在我们来描述这个组件:
- [...]
- export default {
- name: 'Playlist',
- data () {
- return {
- interests : '',
- loading: ''
- }
- },
- mounted : function(){
- // Get all the tags for videos uploaded by this user
- axios.get('http://localhost:3128/suggest')
- .then( result => {
- // what you get ideally from here is the JSON of the info
- this.interests = result.data.tags;
- let cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
- let demoplayer = cld.videoPlayer('video-player');
- demoplayer.playlistByTag( result.data.tags[0] ,
- { autoAdvance: 0, repeat: true, presentUpcoming: 15 })
- })
- }
- }
- </script>
- [...]
当上面的组件被挂载时, 我们向服务器的 / suggest 路由发出 get 请求, 服务器返回标记列表, 然后我们使用 Cloudinary VideoPlayer 的 playlistByTag 函数播放 resource 的第一个标记的视频.
组件的模板如下:
- [...]
- <template>
- <div class="container suggestions">
- <h1 class="header">Suggested Video Playist</h1>
- <p><em>results are based on video uploads...</em></p>
- <div class="video-area">
- <!-- This will contain the video player -->
- <h2>Your interests : </h2>
- <template v-for="interest in interests">
- {{ interest }}
- </template>
- <video
- id="video-player"
- controls
- class="cld-video-player cld-video-player-skin-dark"
- >
- </video>
- </div>
- </div>
- </template>
- [...]
和一些范围内的 CSS 样式:
/*Here: https://github.com/christiannwamba/video-suggestion/blob/master/
frontend/src/components/Playlist.vue#L56-L87
*/
导入我们的 App.vue 中的组件
现在我们已经准备好了组件, 我们将它们导入到 App.vue 中, 以便在编译视图时捕获它们:
- <script>
- import Upload from './components/Upload'
- import Playlist from './components/Playlist'
- export default {
- name: 'app',
- components: {
- Upload,
- Playlist
- }
- }
- </script>
应用程序 vue 的模板如下:
- <template>
- <div id="app">
- <img src="./assets/video.png" width="100">
- <Upload/>
- <Playlist/>
- </div>
- </template>
- [...]
我们看到这里使用了上载和播放列表模板.
一旦完成这一步, 我们的前端服务器就准备好了, 我们可以使用以下命令运行它:
NPM run dev
结论
我们已经了解了如何使用 Cloudinary 和一些 vue.js 构建视频建议应用程序. 您可以在 GitHub 上查看完整的源代码.
当然, 还有许多其他场景可以使用捕获用户上传内容的数据, 以便在应用程序中为用户提供更个性化的体验.
来源: http://www.css88.com/web/vue-js/12644.html