asp.net core + 前端H5 页面视频站制作尝试
.net core 2.1出来一段时间了,一直关注,前周花了半天时间学习了一下,特制作了一个视频小站(欢迎扫码体验):
页面首页效果如下:
播放页面效果如下:
部分代码:
using ENT.IBLL;
using ENT.WebApp.IModels;
using ENT.WebApp.ViewModels;
using NCore;
using NCore.Web.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks; namespace ENT.WebApp.Models
{
public class HomeModel : ModelCore, IHomeModel
{
public override Type ThisClassType => this.GetType(); public IinformationBLL IinformationBLL { get; set; } public IEnumerable<PlayViewModel> GetVideoSwipers()
{
var res = new List<PlayViewModel>().AsEnumerable();
var dtos = this.IinformationBLL.Page(f => f.flow > , , , null, null);
if (dtos != null)
{
res = dtos.Map<IEnumerable<PlayViewModel>>();
}
return res;
} public IEnumerable<PlayViewModel> GetNewVideos()
{
var res = new List<PlayViewModel>().AsEnumerable();
var dtos = this.IinformationBLL.Page(null, , , null, new string[] { " creation_time " });
if (dtos != null)
{
res = dtos.Map<IEnumerable<PlayViewModel>>();
}
return res;
} public IEnumerable<PlayViewModel> GetHotVideos()
{
var res = new List<PlayViewModel>().AsEnumerable();
var dtos = this.IinformationBLL.Page(null, , , null, new string[] { " flow " });
if (dtos != null)
{
res = dtos.Map<IEnumerable<PlayViewModel>>();
}
return res;
} public HomeViewModel GetVideoViewModel(string id)
{
var res = new HomeViewModel();
res.video_swipers = this.GetVideoSwipers();
res.newvideos = this.GetNewVideos();
res.hotvideos = this.GetHotVideos();
return res;
} }
}
@model HomeViewModel
@{
ViewData["Title"] = "视频";
}
<link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<style>
.swiper-container {
width: 100%;
height: 100%;
} .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
} .swiper-slide img {
width: 100%;
} .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #ff2c55;
}
</style>
<div class="home_video">
<div class="home_swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
@foreach (var item in Model.video_swipers)
{
<div class="swiper-slide"><a href="~/play/details/@item.id"><img src="@item.img" /></a></div>
}
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="newday">
<div class="title"><i class="ylyqiconfont" id="n_back"></i> 最近更新</div>
<div class="list">
@foreach (var item in Model.newvideos)
{
<div class="item">
<a href="~/play/details/@item.id">
<div class="img"><img src="@item.img" /></div>
<div class="des">@item.title</div>
</a>
</div>
}
<div class="clearfix"></div>
</div>
</div> <div class="newday">
<div class="title"><i class="ylyqiconfont" id="n_back"></i> 猜你喜欢</div>
<div class="list">
@foreach (var item in Model.hotvideos)
{
<div class="item">
<a href="~/play/details/@item.id">
<div class="img"><img src="@item.img" /></div>
<div class="des">@item.title</div>
</a>
</div>
}
<div class="clearfix"></div>
</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
}, autoplay: {
delay: 3000,
}
});
</script>
using ENT.IBLL;
using ENT.WebApp.IModels;
using ENT.WebApp.ViewModels;
using NCore;
using NCore.Web.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks; namespace ENT.WebApp.Models
{
public class PlayModel : ModelCore, IPlayModel
{
public IinformationBLL IinformationBLL { get; set; } public override Type ThisClassType => this.GetType(); public PlayViewModel GetPlayViewModel(string vid)
{
var vm = new PlayViewModel();
vm.PlayViewModels = new List<PlayViewModel>().AsEnumerable();
try
{
if (!vid.IsNullOrEmpty())
{
var dto = this.IinformationBLL.FirstOrDefault(f => f.id == vid);
if (dto != null)
{
vm = dto.Map<PlayViewModel>();
var cvms = this.IinformationBLL.Page(f => f.classify_id == vm.classify_id, 1, 10, null, new string[] { " flow " });
if (cvms != null)
{
vm.PlayViewModels = cvms.Map<IEnumerable<PlayViewModel>>();
}
dto.flow += 1;
this.IinformationBLL.Update(dto);
}
}
else
{
vm.max_img = "http://vjs.zencdn.net/v/oceans.png";
vm.src = "http://vjs.zencdn.net/v/oceans.mp4";
vm.title = "饥饿的海鸥";
}
}
catch (Exception ex)
{
this.Logger.Error(ex);
}
return vm;
}
}
}
@{
Layout = null;
}
@model PlayViewModel;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>@Model.title</title>
<link href="https://cdn.bootcss.com/video.js/7.0.3/video-js.min.css" rel="stylesheet">
<link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" />
<script src="https://cdn.bootcss.com/video.js/7.0.3/video.min.js"></script>
<script src="https://cdn.bootcss.com/video.js/7.0.3/lang/zh-CN.js"></script>
<style> .vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
} .video-js .vjs-big-play-button {
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/*中间的播放箭头*/
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/*加载圆圈*/
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
</style>
</head>
<body>
<div class="video_details">
<div class="main">
<div class="head">
<a href="~/home/index/1"><i class="ylyqiconfont" id="n_back"></i></a>
<i class="ylyqiconfont" id="n_support"></i>
<i class="ylyqiconfont" id="n_opposition"></i>
<i class="ylyqiconfont" id="n_collection"></i>
<i class="ylyqiconfont" id="n_share"></i>
<i class="ylyqiconfont addf"><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5NzY1Mjg3Nw==&scene=110#wechat_redirect"></a></i>
</div>
<div class="video"> <video id="myvideo" class="video-js vjs-big-play-centered vjs-fluid" controls height="264" preload="auto" poster="@Model.img" data-setup="{}">
<source src="@Model.src" type="video/mp4">
</video>
</div>
<div class="videoinfo">
<div class="title">@Model.title</div>
<div class="info">
<div class="left">@(Model.flow + Model.default_flow)次播放 @(Model.support)赞 @(Model.creation_time.Value.ToString("yyyy-MM-dd HH:mm"))</div>
<div class="right"><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5NzY1Mjg3Nw==&scene=110#wechat_redirect"><i class="ylyqiconfont"></i>关注娱来娱趣</a></div>
<div class="clearfix"></div>
</div>
</div>
<div class="video_nav">
<div class="video_nav_main">
<a href="~/home/index/1">
<div class="v_left"><img src="~/images/video.png" /></div>
<div class="v_right">
<div class="left">
搞笑视频
<div class="des">
包含搞笑短片、搞笑配音、爆笑节目、童趣萌宠、雷人囧事、幽默短片等。让你笑口常开,甩掉烦恼...
</div>
</div>
<div class="right"><div class="init">进入<i class="ylyqiconfont"></i></div></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div></a>
</div>
<div class="video_recommend">
<div class="title">
<div class="left"><i class="ylyqiconfont"></i>大家都在看</div>
<div class="right"><a href="~/home/index/1">全部<i class="ylyqiconfont"></i></a></div>
<div class="clearfix"></div>
</div>
<div class="list">
@foreach (PlayViewModel item in Model.PlayViewModels)
{
<div class="item">
<a href="~/play/details/@item.id">
<div class="left">
<div class="title">@item.title</div>
<div class="info">
@(item.flow + item.default_flow)次播放 @(item.support)赞 @(item.creation_time.Value.ToString("yyyy-MM-dd HH:mm"))
</div>
</div>
<div class="right">
<i class="ylyqiconfont"></i>
<img src="@item.img" />
</div>
<div class="clearfix"></div>
</a>
</div>
}
</div>
</div>
</div>
</div>
<script src="~/js/site.min.js"></script>
</body>
</html>
代码我就不一一粘了,直接下载吧:
https://pan.baidu.com/s/15OxmoBGB4rzGXCsQwcJhwA
代码写得不好勿喷。
asp.net core + 前端H5 页面视频站制作尝试的更多相关文章
- ASP.NET Core使用Razor页面
ASP.NET Core使用Razor页面 Razor是ASP.NET的页面引擎,在ASP.NET MVC 3以后被广泛使用,我在之前的博客中有所介绍,需要更多了解的朋友请移步[Razor语法] 在A ...
- Asp.net core中由于页面编码导致的中文乱码
问题描述 最近使用asp.net core写了一个简单的网站,在windows系统下完全没有出现问题.后来在linux系统中搭建了docker,并且在linux中自动使用git获取源码,编译,部署一条 ...
- asp.net core 微信H5支付(扫码支付,H5支付,公众号支付,app支付)之2
上一篇说到微信扫码支付,今天来分享下微信H5支付,适用场景为手机端非微信浏览器调用微信H5支付惊醒网站支付业务处理.申请开通微信H5支付工作不多做介绍,直接上代码. 首先是微信支付业务类(WxPayS ...
- ASP.NET CORE的H5上传
做的CORE项目中用到H5上传,把以前的MVC代码复制过来得修改一下才能用在.NET CORE中
- asp.net core web 解决方案多项目模板制作打包总结
一.文件夹\项目结构 1.1.文件夹 net6.0:针对.net 6.0 项目模板 net6.0pack:针对net6.0打包 1.2.项目结构 Web\WebApi多项目.各层项目.单元测试项目 目 ...
- ASP.NET Core Web API + Angular 仿B站(二)后台模型创建以及数据库的初始化
前言: 本系列文章主要为对所学 Angular 框架的一次微小的实践,对 b站页面作简单的模仿. 本系列文章主要参考资料: 微软文档: https://docs.microsoft.com/zh-cn ...
- ASP.NET Core 防止跨站请求伪造(XSRF/CSRF)攻击 (转载)
什么是反伪造攻击? 跨站点请求伪造(也称为XSRF或CSRF,发音为see-surf)是对Web托管应用程序的攻击,因为恶意网站可能会影响客户端浏览器和浏览器信任网站之间的交互.这种攻击是完全有可能的 ...
- ASP.NET Core 中的 Razor 页面介绍
标题:ASP.NET Core 中的 Razor 页面介绍 地址:https://docs.microsoft.com/zh-cn/aspnet/core/razor-pages/index?view ...
- [Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件
前言, Blazor Assembly 需要最少 1.9M 的下载量. ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. ) 随着程序越来越复杂, 引用的东西越来越多, ...
随机推荐
- ajax 回调函数
回调函数 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.error.dataFilter.success.complete. beforeSend 在发送请求之前调用 ...
- 如何创建dll以及使用
使用dll的好处: 隐藏了代码,公开了功能. 在VS2017中,创建一个DLL工程项目,将你的代码写入.cpp文件中,然后比如 这样: //////////// test.cpp #include ...
- Python常见函数用法
1. shape()函数 在numpy模块 输入参数:类似数组(比如列表,元组)等,或是数组 返回:一个整型数字的元组,元组中的每个元素表示相应的数组每一维的长度 # shape[0]返回对象的行数, ...
- php获取远程图片模拟post,file上传到指定服务器
1.获取远程图片 /** $path保存图片的地址 $url要获取的远程图片地址 **/ function getimg($path,$url){ $aext = explode('.', $url) ...
- kubenetes dns
E0228 07:32:28.912833 1 reflector.go:201] k8s.io/dns/pkg/dns/dns.go:147: Failed to list *v1.En ...
- Python 爬虫之 Scrapy 分布式原理以及部署
Scrapy分布式原理 关于Scrapy工作流程 Scrapy单机架构 上图的架构其实就是一种单机架构,只在本机维护一个爬取队列,Scheduler进行调度,而要实现多态服务器共同爬取数据关键就是共享 ...
- Nginx源码完全注释(6)core/murmurhash
下面是摘自 Google Code 的 Murmurhash 开源项目主页上的 Murmurhash2,Nginx 就是采用的这个. uint32_t MurmurHash2 ( const void ...
- HoloLens的显示分辨率有多少?
作者:胡痴儿2.0链接:https://www.zhihu.com/question/27737626/answer/92339648来源:知乎著作权归作者所有,转载请联系作者获得授权. 左右眼各,7 ...
- AlienWare
https://www.chiphell.com/thread-1705089-1-1.html AlienWare
- 解决VS2013中的控制台一闪而过的问题
修改项目配置,右键点击项目,在右键菜单中选择属性,然后在弹出的对话框左侧列表中中选择 “配置属性”-->“链接器”-->“系统”,然后在右侧的列表中, 在第一项”子系统“的值中选择”控制台 ...