3、boostrap图片视频上传展示

已于 2023-08-12 21:36:42 修改
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： 音视频 javascript 前端
于 2023-07-02 20:30:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44986037/article/details/131504872
版权

boostrap图片视频上传展示

1、展示效果

在这里插入图片描述

在这里插入图片描述

项目目录结构
在这里插入图片描述

2、html代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    -->



         <!-- 国内的，预览有些按钮用不了 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>


    <link href="../static/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="../static/fileinput/themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="../static/fileinput/js/plugins/buffer.min.js" type="text/javascript"></script>
    <script src="../static/fileinput/js/plugins/filetype.min.js" type="text/javascript"></script>
    <script src="../static/fileinput/js/plugins/piexif.js" type="text/javascript"></script>
    <script src="../static/fileinput/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="../static/fileinput/js/fileinput.js" type="text/javascript"></script>
    <script src="../static/fileinput/js/locales/fr.js" type="text/javascript"></script>
    <script src="../static/fileinput/js/locales/es.js" type="text/javascript"></script>
    <script src="../static/fileinput/themes/fa5/theme.js" type="text/javascript"></script>
    <script src="../static/fileinput/themes/explorer-fa5/theme.js" type="text/javascript"></script>

   <script src="../static/js/imgEnlarge.js"></script>

    <style>
        /*统配设置整个文件为宋体，12号字*/
        *{
            font-family: '楷体';
            font-size:12px;
        }
        /*设置商品列表宽度占浏览器60%，居中*/
        #main {

            width:90%;
            height: 600px;
            margin: 0 auto;
            border:0px solid green;
        }

        #main2 {

            width:90%;
            height: 600px;
            margin: 0 auto;
            border:0px solid green;
        }

        /*设置图片宽高*/
        img {
            width: 140px;
            height: 200px;
            padding: 25px 25px 0px 25px;

        }

         /*设置图片宽高*/
        video {
            width: 300px;
            height: 220px;

            padding: 10px 10px 0px 10px;

        }


        .myvideobord {
            width:330px;
            height: 260px;
            border: 2px solid green;
            border-radius:10px;/*设置圆角矩形*/
            margin-left: 5px;
            margin-bottom: 20px;/*边框上下距离*/
            margin-right: 5px;
        }


        /*设置图片边框*/
        .sfz_01_34 {
            width:200px;
            height: 250px;
            border: 2px solid green;
            border-radius:10px;/*设置圆角矩形*/
            margin-left: 5px;
            margin-bottom: 20px;/*边框上下距离*/
            margin-right: 5px;
        }
        .sfz_02_34{
            color: red;
            text-align: center;
        }
        .sfz_03_34{
            height: 60px;
            color:black;
            text-indent: 2em;
        }
        /*设置加入购物单*/
        .sfz_04_34{
           margin-left:20px;
            padding-top:10px
            padding-bottom:10px;
            text-align: center;
            font-size: 10px;
            border-radius:0px;
            color: white;
            width: 30%;
           line-height: 20px;
            background: red;
            float: left;
        }
        .sfz_05_34{
           margin-right: 20px;/*靠边框距离*/
            color: white;
            font-size: 10px;
            width: 30%;
            height: 20px;
            line-height: 20px;/*字在中间*/
            text-align: center;
            background: greenyellow;
            float: right;

        }

        /*去掉列表序号去掉*/
        ul {
            list-style: none;
            overflow: hidden;
        }
        /*设置左浮动*/
        ul li {
            float: left;
        }

        /*设置默认状态是黑色字体*/
        a:link {
            color: black;
        }
        /*设置鼠标放上去后显示红色*/
        div:hover {
           border-color: #ff0000;
        }

        {#.qqq{#}
        {#    transition: all 0.2s linear;#}
        {#}#}
        {##}
        {#.qqq:hover{#}
        {#    transform: scale(1.8);#}
        {#    transition: all 0.2s linear;#}
        {#}#}

    </style>
<!--
     <script src="static/js/jquery-3.3.1.min.js"></script>
   -->


      <script>
         $(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

</head>
<body class="container my-4">

<br> <br> <br>

 <div class="container"  style=" padding: 10px 3ex 2em 1cm; border: 2px solid blue;width: 70%;height: 100%">

      <hr>
    <p align="center"  style="color:sienna;font-size:30px"  >上传表单</p>
    <hr>

        <form  action="/" method="post" class="form-horizontal" role="form" enctype="multipart/form-data" >

            <div class="form-group">
                <label for="name" class="control-label col-md-4">用户名</label>
                <div class="col-md-4">
                    <input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名">
                </div>
            </div>

            <div class="form-group">
                <label for="pwd" class="control-label col-md-4">密码</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="pwd" name="password" placeholder="请输入密码">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-4" >性别</label>
                <div class="col-md-4">
                    <label class="radio-inline" for="male"><input type="radio" name="sex" id="male" >男</label>
                    <label class="radio-inline" for="female"><input type="radio" name="sex" id="female"
                            checked>女</label>
                </div>
            </div>

            <div class="form-group">
                <label for="" class="control-label col-md-4">兴趣爱好</label>
                <div class="col-md-4">
                    <label for="qin" class="checkbox-inline"><input type="checkbox" name="" id="qin">琴</label>
                    <label for="qi" class="checkbox-inline"><input type="checkbox" name="" id="qi">棋</label>
                    <label for="shu" class="checkbox-inline"><input type="checkbox" name="" id="shu">书</label>
                    <label for="hua" class="checkbox-inline"><input type="checkbox" name="" id="hua" checked>画</label>
                </div>
            </div>

            <div class="form-group">
                <label for="" class="control-label col-md-4">所在地</label>
                <div class="col-md-4">
                    <select name="adree" id="" class="form-control">
                        <option value="">湖北</option>
                        <option value="">湖南</option>
                        <option value="">河北</option>
                        <option value="" selected>河南</option>
                    </select>
                </div>
            </div>


             <div class="form-group">

            <div class="file-loading">
                <input  id="file-1" name="video" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1" data-browse-on-zone-click="true">
            </div>
        </div>

            <div class="form-group">

            <div class="file-loading">
                <input  id="file-2" name="image" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" data-browse-on-zone-click="true">
            </div>
        </div>




              <div class="form-group">
                  <button type="submit" class="btn btn-primary">Submit</button>
                  <button type="reset" class="btn btn-outline-secondary">Reset</button>

              </div>



        </form>

     <br> <br> <br> <br>
 </div>

<hr>
<br>
<hr>

<div  class="container">

<hr>
<p align="center"  style="color:sienna;font-size:30px"  >图像展示</p>
<hr>

    <ul>

     <!--   <li>
            <div class="sfz_01_34"><img src="p30.png">
            <p class="sfz_02_34">¥3998.00</p>
            <p class="sfz_03_34">p30 超感光麒麟980AL智能芯片全面屏屏内指纹版手机8G+128GB全网通4G手机</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
        </li>

          <li>
            <div class="sfz_01_34"><img src="../static/hua.jpg">
              <a class="sfz_05_34" href="url">链接文本</a>

            </div>
        </li>


        -->

        {% for value in imglist %}

         <li>
            <div class="sfz_01_34"><img class="qqq" src="./static/myfile/img/{{ value }}">
                 <a class="sfz_04_34" href="/delete/img/{{ value }}/">删除</a>

              <a class="sfz_05_34" href="/down/img/{{ value }}/">下载</a>

            </div>
        </li>
        {% endfor %}

    </ul>
</div>
<hr>
<br>
<hr>
<div  class="container">
    <hr>
    <p align="center"  style="color:sienna;font-size:30px"  >视频展示</p>
    <hr>

    <ul>

     <!--   <li>
            <div class="sfz_01_34"><img src="p30.png">
            <p class="sfz_02_34">¥3998.00</p>
            <p class="sfz_03_34">p30 超感光麒麟980AL智能芯片全面屏屏内指纹版手机8G+128GB全网通4G手机</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
        </li>

        <li>
            <div class="myvideobord">

               <video width="320" height="240" controls autoplay>
                  <source src="../static/myfile/video/12s.mp4" type="video/mp4">
                  <source src="../static/myfile/video/12s.ogg" type="video/ogg">
                  <source src="../static/myfile/video/12s.webm" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
                 <a class="sfz_04_34" href="#">删除</a>
                 <a class="sfz_05_34" href="#">下载</a>
            </div>
        </li>


        -->


{#   {% for value in imglist %}#}
{##}
{#         <li>#}
{#            <div class="sfz_01_34"><img class="qqq" src="./static/myfile/img/{{ value }}">#}
{#                 <a class="sfz_04_34" href="/delete/{{ value }}/">删除</a>#}
{##}
{#              <a class="sfz_05_34" href="/down/{{ value }}/">下载</a>#}
{##}
{#            </div>#}
{#        </li>#}
{#        {% endfor %}#}


         {% for value in videolist %}
             <li>
                <div class="myvideobord">

                   <video width="320" height="240" controls autoplay>
                      <source src="../static/myfile/video/{{ value }}" type="video/mp4">

                      您的浏览器不支持 video 属性。
                    </video>
                     <a class="sfz_04_34" href="/delete/video/{{ value }}">删除</a>
                     <a class="sfz_05_34" href="/down/video/{{ value }}/">下载</a>
                </div>
            </li>
         {% endfor %}



<!--
         <li>
            <div class="myvideobord">

               <video width="320" height="240" controls autoplay>
                  <source src="movie.mp4" type="video/mp4">
                  <source src="movie.ogg" type="video/ogg">
                  <source src="movie.webm" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
                 <a class="sfz_04_34" href="#">删除</a>
                 <a class="sfz_05_34" href="#">下载</a>
            </div>
        </li>



         <li>
            <div class="myvideobord">

               <video width="320" height="240" controls autoplay>
                  <source src="movie.mp4" type="video/mp4">
                  <source src="movie.ogg" type="video/ogg">
                  <source src="movie.webm" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
                 <a class="sfz_04_34" href="#">删除</a>
                 <a class="sfz_05_34" href="#">下载</a>
            </div>
        </li>




         <li>
            <div class="myvideobord">

               <video width="320" height="240" controls autoplay>
                  <source src="movie.mp4" type="video/mp4">
                  <source src="movie.ogg" type="video/ogg">
                  <source src="movie.webm" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
                 <a class="sfz_04_34" href="#">删除</a>
                 <a class="sfz_05_34" href="#">下载</a>
            </div>
        </li>



         <li>
            <div class="myvideobord">

               <video width="320" height="240" controls autoplay>
                  <source src="movie.mp4" type="video/mp4">
                  <source src="movie.ogg" type="video/ogg">
                  <source src="movie.webm" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
                 <a class="sfz_04_34" href="#">删除</a>
                 <a class="sfz_05_34" href="#">下载</a>
            </div>
        </li>



         <li>
            <div class="myvideobord">

               <video width="320" height="240" controls autoplay>
                  <source src="movie.mp4" type="video/mp4">
                  <source src="movie.ogg" type="video/ogg">
                  <source src="movie.webm" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
                 <a class="sfz_04_34" href="#">删除</a>
                 <a class="sfz_05_34" href="#">下载</a>
            </div>
        </li>


         <li>
            <div class="myvideobord">

               <video width="320" height="240" controls autoplay>
                  <source src="movie.mp4" type="video/mp4">
                  <source src="movie.ogg" type="video/ogg">
                  <source src="movie.webm" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
                 <a class="sfz_04_34" href="#">删除</a>
                 <a class="sfz_05_34" href="#">下载</a>
            </div>
        </li>

        -->

    </ul>
</div>




<script>

    $("#file-0").fileinput({
        theme: 'fa5',
        uploadUrl: '#',
        overwriteInitial: false,
    }).on('filepreupload', function(event, data, previewId, index) {
        alert('The description entered is:\n\n' + ($('#description').val() || ' NULL'));
    });

      $("#file-1").fileinput({
          language: 'zh',     //设置语言
        dropZoneEnabled: true,      //是否显示拖拽区域
        dropZoneTitle: "视频拖放到这里",    //拖拽区域显示文字

        theme: 'fa5',
        uploadUrl: '#', // you must set a valid URL here else you will get an error
        allowedFileExtensions: ['mp4'],
        overwriteInitial: false,
          showUpload: false, //是否显示上传按钮
        maxFileSize: 9000,
        maxFilesNum: 100,
        //allowedFileTypes: ['image', 'video', 'flash'],

    });

       $("#file-2").fileinput({

           language: 'zh',     //设置语言
        dropZoneEnabled: true,      //是否显示拖拽区域
        dropZoneTitle: "图片拖放到这里",    //拖拽区域显示文字

        theme: 'fa5',
        uploadUrl: '#', // you must set a valid URL here else you will get an error
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
           showUpload: false, //是否显示上传按钮
        maxFileSize: 9000,
        maxFilesNum: 100,
         //  minFileCount: 1,
        //allowedFileTypes: ['image', 'video', 'flash'],
           /*
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        } */
    });

/*
    $('#file').fileinput({
        language: 'zh',     //设置语言
        dropZoneEnabled: true,      //是否显示拖拽区域
        dropZoneTitle: "可以将图片拖放到这里",    //拖拽区域显示文字
        uploadUrl: 'file/imgSave',  //上传路径
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],   //指定上传文件类型
        maxFileSize: 0,
        maxFileSize: 2048,   //上传文件最大值，单位kb
        uploadAsync: true,  //异步上传
        maxFileCount: 2    //上传文件最大个数。
    }).on("fileuploaded", function(event,data) { //异步上传成功后回调
        console.log(data);		//data为返回的数据
    });
*/


</script>



</body>
</html>

js代码
fileinput插件下载地址：https://github.com/kartik-v/bootstrap-fileinput/

imgEnlarge.js如下

// 依赖jq 默认点击<img>标签就会放大，可根据自己情况修改

$(document).ready(function () {
    $("body").append("<!--放大图片-->\n" +
        "<div class=\"blackScreen\" style=\"display: none;display:none;    position:fixed;    top:0;    right:0;    bottom:0;    left:0;    background-color:#000000;    z-index:1000;\">\n" +
        "    <span class=\"fullScreenImg\" style='position:absolute;    top:0;    right:0;    bottom:60px;    left:0;    background:center center no-repeat;    background-size:contain;'></span>\n" +
        "</div>");
});

$(function () {

// 放大图片
    $('img').on('click', function () {
        // console.log("放大");
        if (this.getAttribute("src") != "url(\"null\") 0% 0% / 100% no-repeat") {
            $(".fullScreenImg").css("background-image", "url(\"" + this.getAttribute("src") + "\")");
            $(".blackScreen").fadeIn(100);
        }
    });

// 关闭放大图片
    $(".blackScreen").on("click", function () {
        // console.log("关闭");
        $(".blackScreen").fadeOut(100);
    });

});

前后端完整代码：https://blog.csdn.net/weixin_44986037/article/details/131504282?spm=1001.2014.3001.5502

爱补鱼的猫猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap5 实现视频播放
weixin_35755188的博客
12-28 1844
要在 Bootstrap 5 中实现视频播放，你需要使用 HTML5 的 <video> 标签。 首先，在你的 HTML 文件中插入 <video> 标签，并指定视频的 URL： <video src="myvideo.mp4" controls></video> 其中，controls 属性会在视频上显示控制按钮，如播放/暂停、音量调节等。 你也...
Springboot+bootstrap界面版之增删改查及图片上传
weixin_45576466的博客
12-01 407
Springboot+bootstrap界面版之增删改查及图片上传一、项目结构图二、文件配置三、相关代码 工程创建所需要增加的依赖 一、项目结构图 二、文件配置 1、导入文件上传pom依赖和降低mysql版本号 <mysql.version>5.1.44</mysql.version> <version>${mysql.version}</version> <dependency> <groupId>commons-fil
bootstrap-fileinput图片，文档，视频上传
qq_35187942的博客
06-07 7268
图片上传(bootstrap做了很好的封装): 有兴趣的话可以看一下官网的demo：http://plugins.krajee.com/file-input-ajax-demo/4 html页面引用文件上传js（fileinput.js），css（fileinput.css） <!-- 引入jq,bootstrap --> <!-- 图片上传即时预览插件 --> &lt...
bootstrap-fileinput的简单使用(图片上传和编辑)
热门推荐
Linging_24的博客
05-31 1万+
简介： 一款非常优秀的HTML5文件上传插件，支持bootstrap 3.x 和4.x版本，具有非常多的特性:多文件选择。这个插件能最简单的帮你完成文件上传功能，且使用bootstrap样式。还支持多种文件的预览，images, text, html, video, audio, flash。另外还支持ajax方式上传文件，可以看到上传进度。支持拖拽的方式添加和删除文件。 一、下载bootstrap-fileinput 下载bootstrap-fileinput 参数的配置可以参考：https://
基于 Bootstrap 与 Video.js 开发Web视频播放页面
群鸿
01-03 5714
一、知识点概述： Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 官方网址：https://www.bootcss.com/ Video.js 是一款Web视频播放器，支持HTML5和FLASH两种播放方式，更有自定义皮肤，插件，组件，语言还有丰富的选项配置。 官方网址：https://videojs.com/ ...
bootstrap-fileinput 多文件上传,显示,编辑回显,再次新增图片同时显示
LittelCai的博客
02-17 4297
fileinput 多文件上传,显示,编辑回显,再次新增图片同时显示
Bootstrap实战---Dplayer播放器(图片)
Season CSDN博客
07-13 801
Bootstrap实战—Dplayer播放器(图片) 本章介绍如何利用Dplayer播放器来构建视频播放网页。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width
3、Flask boostrap实现图片视频上传下载展示
07-02
在本教程中，我们将探讨如何使用Flask框架和Bootstrap库来实现一个功能完善的图片和视频上传、下载和展示的Web应用。Flask是一款轻量级的Python Web服务器网关接口（WSGI）微框架，而Bootstrap则是一个流行的前端...
文件上传插件bootstrap File
08-01
7. **预览功能**：对于图片、视频等媒体文件，插件提供预览功能，用户可以在上传前查看文件内容，提高了用户体验。 8. **进度条显示**：在文件上传过程中，插件会显示上传进度，让用户了解当前的上传状态，增加了...
bootstrap文件上传demo
11-30
在IT行业中，文件上传功能是Web应用中常见且重要的组成部分，尤其在大数据时代，用户需要上传各种文件，如图片、文档、视频等。本示例"bootstrap文件上传demo"是基于Spring MVC框架和Bootstrap前端库实现的一个高效...
bootstrap文件上传组件
07-12
2. **预览功能**：支持图片、视频和其他类型的文件预览，用户在上传前可以查看文件内容。 3. **自定义文件类型**：可以限制可上传的文件类型，例如只接受图像或文档。 4. **上传进度条**：展示文件上传的进度，增加...
Bootstrap视频网站模板.zip
05-18
开发者需要了解如何根据需求修改模板，添加自定义功能，或者整合第三方服务如视频上传、评论系统、用户登录注册等。 通过深入理解和运用这些知识点，开发者可以快速搭建出一个功能完备、用户体验优秀的视频网站。...
bootstrap开发公众号后台，管理永久素材页面
11-07 725
经过前面几节课程， 你已经学会微信临时素材的上传和管理， 接下来子恒老师将跟你分享微信素材中另外一种重要素材的管理， 也就是永久素材。 公众号永久素材管理， 主要分为3个方面的内容： 前端管理页面 上传永久素材 永久素材的下载与删除 这一节微信开发课程中， 子恒老师带你实现第
springboot 图片文件的上传并显示于页面
m0_67587248的博客
04-14 393
在数据库中用picUrl来放图片 更新页面 这里我们只需要做图片的更新就行 控制器 效果显示
bootstrap-fileinput视频上传以及上传后视频预览
weixin_49456013的博客
12-23 2306
1.页面写input <input id="videoUpload" name="file" type="file" accept="video/*"> 2.页面引入js和css <link href="/fileinput.min.css" rel="stylesheet" /> <script src="/fileinput.min.js"></script> 3.上传的js代码 $("#videoUpload").fileinput(
html视频播放 bootstrap,基于Bootstrap和jQuery的视频播放器插件
weixin_33230532的博客
06-28 2851
插件特点很容易自定义样式一个页面支持多个视频非常简单的使用HTML5视频标签显示暂停、开始按钮显示进度条显示视频时间显示并调节音量全屏窗口按钮允许隐藏按钮栏允许自动播放浏览器兼容jQuery 1.6+ in Firefox, Safari, Chrome, Internet Explorer 9, Opera 11。使用方法1、首先下载 Bootstrap Video Player 的插件文件，你...
基于RK3588的8K视频解码显示案例分享！引领超高清工业视频时代
最新发布
创龙，嵌入式一体化解决方案商
07-11 503
创龙科技RK3588J工业核心板支持8K@60fps HDMI2.1、8K@30fps DP 1.4a、4K@60fps eDP 1.3和MIPI DSI、1080P@60fps RGB/BT1120等多种高清视频输出接口，可提供出众的超高清“多屏异显”和“多屏同显”解决方案。创龙科技RK3588工业核心板支持8K@60fps H.265、8K@30fps H.264视频硬件解码，支持8K@30fps H.265/H.264视频硬件编码，可提供出众的超高清视频解决方案。这是当前市场上最高分辨率的标准之一。
bootstrap图片展示html模板
05-16
其中，图片展示是网页设计的重要组成部分之一，Bootstrap提供了很多图片展示的模板供使用。 要使用Bootstrap的图片展示html模板，首先需要引入Bootstrap的样式和脚本文件。然后选择相应的图片展示组件，例如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值