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 船新项目下载量测试 , 仅供参考. ) 随着程序越来越复杂, 引用的东西越来越多, ...

随机推荐

sql开启xp_cmdshell
sql开启xp_cmdshell sp_configure reconfigure go sp_configure reconfigure go
取消Eclipse的js校验功能
1 window>>preferences>>javascript>>validator>>Error/warnings 去掉 Enable Javas ...
C# 发送和接受Get请求
1.发送Get请求 public static string HttpGet(string Url, string postDataStr) { HttpWebRequest request = (H ...
Hadoop HA 机制学习
一.Hadoop 系统架构 1.1 Hadoop1.x和Hadoop2.x 架构在介绍HA之前,我们先来看下Hadoop的系统架构,这对于理解HA是至关重要的.Hadoop 1.x之前,其官方架构如 ...
[转]字符集、字符编码、XML中的中文编码
字符集.字符编码.XML中的中文编码作为程序员的你是不是对于ASCII .UNICODE.GB2321.UTF-7.UTF-8等等不时出现在你面前的这些有着奇怪意义的词感到很讨厌呢,是不是总觉得好象 ...
shell-array
[shell-array] Creating Array: $ names=("Bob" "Peter" "$USER" "Big ...
java动态规划问题
这里是简单的动态规划问题.其实,如果我们学过数据结构,应该就接触过动态规划问题,当时一直没有反应过来.我们求最小生成树用的是贪婪算法.而求最短路径就是动态规划.从一个点出发,到另外每个点的最短距离.在 ...
unity在安卓中横屏闪退
竖屏没问题,横屏闪退配置文件的AndoridManifest.xml横竖屏设置要和UNITY设置的一致,否则就会强退 UNITY横竖屏设置
Unity3d收藏链接/ 小马哥视频
Unity3d视频教程下载链接: http://pan.baidu.com/s/1kVwFhrh 密码: v6c7 第一部分 https://pan.baidu.com/share/in ...
RTX二次开发笔记1
在客户端,一个rtx用户给另一个rtx用户发送消息! 我的解决方案:在rtx服务端部署一个 wcf服务或 webservice 服务,然后程序在客户端调用服务就行. 1,C#版 (服务端需要4个DL ...

asp.net core + 前端H5 页面视频站制作尝试

asp.net core + 前端H5 页面视频站制作尝试的更多相关文章

随机推荐

热门专题