描述：哔哩哔哩动画官方提供链接(规定宽高度，有弹幕)
描述：哔哩哔哩动画官方提供链接(规定高度，有弹幕)
描述：视频窗口手动(屏幕小的手机部分按键不可用，无弹幕) 播放/暂停 放大 缩小 普通 您的浏览器不支持 HTML5 video 标签。 描述：视频自适应窗口(调用哔哩哔哩动画窗口，高度498，宽度100%，有弹幕，限制全屏) 描述：本地插入视频测试(浏览器自带播放器，自适应，无弹幕) 描述：本地插入视频测试(网页视频下载，暂不可用) <h3 id="本地插入"><a href="#本地插入" class="headerlink" title="本地插入"></a>本地插入</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><iframe height=200 width=510 src="本地视频路径"></span><br></pre></td></tr></table></figure> <p>暂无</p> <h3 id="在线插入"><a href="#在线插入" class="headerlink" title="在线插入"></a>在线插入</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><iframe height=300 width=600 src="在线视频链接"></span><br></pre></td></tr></table></figure> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><iframe height=400 width=600 src=https://www.bilibili.com/video/BV1Nf4y147JD?spm_id_from=333.999.0.0"></span><br><span class="line"><video height="auto" width="100%" display="block"; controls></span><br><span class="line"> <source src="//player.bilibili.com/player.html?aid=289429224&bvid=BV1Nf4y147JD&cid=306065089&page=1"></span><br><span class="line"> 你的浏览器不支持video元素，无法播放</span><br><span class="line"></video></span><br></pre></td></tr></table></figure> </div> <hr/> <div class="reprint" id="reprint-statement"> <div class="reprint__author"> <span class="reprint-meta" style="font-weight: bold;"> <i class="fas fa-user"> 文章作者: </i> </span> <span class="reprint-info"> <a href="/about" rel="external nofollow noreferrer">hypumeng</a> </span> </div> <div class="reprint__type"> <span class="reprint-meta" style="font-weight: bold;"> <i class="fas fa-link"> 文章链接: </i> </span> <span class="reprint-info"> <a href="https://hychuyin.github.io/2022/03/27/bilibili/">https://hychuyin.github.io/2022/03/27/bilibili/</a> </span> </div> <div class="reprint__notice"> <span class="reprint-meta" style="font-weight: bold;"> <i class="fas fa-copyright"> 版权声明: </i> </span> <span class="reprint-info"> 本博客所有文章除特別声明外，均采用 <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a> 许可协议。转载请注明来源 <a href="/about" target="_blank">hypumeng</a> ! </span> </div> </div> <script async defer> document.addEventListener("copy", function (e) { let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>'; M.toast({html: toastHTML}) }); function navToReprintStatement() { $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800); } </script> <div class="tag_share" style="display: block;"> <div class="post-meta__tag-list" style="display: inline-block;"> <div class="article-tag"> <a href="/tags/%E6%B5%8B%E8%AF%95%E6%96%87%E6%A1%A3/"> <span class="chip bg-color">测试文档</span> </a> </div> </div> <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;"> <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css"> <div id="article-share"> <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div> <script src="/libs/share/js/social-share.min.js"></script> </div> </div> </div> <style> #reward { margin: 40px 0; text-align: center; } #reward .reward-link { font-size: 1.4rem; line-height: 38px; } #reward .btn-floating:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2); } #rewardModal { width: 320px; height: 350px; } #rewardModal .reward-title { margin: 15px auto; padding-bottom: 5px; } #rewardModal .modal-content { padding: 10px; } #rewardModal .close { position: absolute; right: 15px; top: 15px; color: rgba(0, 0, 0, 0.5); font-size: 1.3rem; line-height: 20px; cursor: pointer; } #rewardModal .close:hover { color: #ef5350; transform: scale(1.3); -moz-transform:scale(1.3); -webkit-transform:scale(1.3); -o-transform:scale(1.3); } #rewardModal .reward-tabs { margin: 0 auto; width: 210px; } .reward-tabs .tabs { height: 38px; margin: 10px auto; padding-left: 0; } .reward-content ul { padding-left: 0 !important; } .reward-tabs .tabs .tab { height: 38px; line-height: 38px; } .reward-tabs .tab a { color: #fff; background-color: #ccc; } .reward-tabs .tab a:hover { background-color: #ccc; color: #fff; } .reward-tabs .wechat-tab .active { color: #fff !important; background-color: #22AB38 !important; } .reward-tabs .alipay-tab .active { color: #fff !important; background-color: #019FE8 !important; } .reward-tabs .reward-img { width: 210px; height: 210px; } </style> <div id="reward"> <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a> <!-- Modal Structure --> <div id="rewardModal" class="modal"> <div class="modal-content"> <a class="close modal-close"><i class="fas fa-times"></i></a> <h4 class="reward-title">你的赏识是我前进的动力</h4> <div class="reward-content"> <div class="reward-tabs"> <ul class="tabs row"> <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li> <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li> </ul> <div id="alipay"> <img src="/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码"> </div> <div id="wechat"> <img src="/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码"> </div> </div> </div> </div> </div> </div> <script> $(function () { $('.tabs').tabs(); }); </script> </div> </div> <article id="prenext-posts" class="prev-next articles"> <div class="row article-row"> <div class="article col s12 m6" data-aos="fade-up"> <div class="article-badge left-badge text-color"> <i class="fas fa-chevron-left"></i> 上一篇</div> <div class="card"> <a href="/2022/03/31/hello-world/"> <div class="card-image"> <img src="/source/images/xxx.jpg" class="responsive-img" alt="typora-vue-theme主题介绍"> <span class="card-title">typora-vue-theme主题介绍</span> </div> </a> <div class="card-content article-content"> <div class="summary block-with-text"> 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 </div> <div class="publish-info"> <span class="publish-date"> <i class="far fa-clock fa-fw icon-date"></i>2022-03-31 </span> <span class="publish-author"> <i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/Markdown/" class="post-category"> Markdown </a> </span> </div> </div> <div class="card-action article-tags"> <a href="/tags/Typora/"> <span class="chip bg-color">Typora</span> </a> <a href="/tags/Markdown/"> <span class="chip bg-color">Markdown</span> </a> </div> </div> </div> <div class="article col s12 m6" data-aos="fade-up"> <div class="article-badge right-badge text-color"> 下一篇 <i class="fas fa-chevron-right"></i> </div> <div class="card"> <a href="/2022/03/24/git/"> <div class="card-image"> <img src="/medias/featureimages/0.jpg" class="responsive-img" alt="Git疑难解答"> <span class="card-title">Git疑难解答</span> </div> </a> <div class="card-content article-content"> <div class="summary block-with-text"> </div> <div class="publish-info"> <span class="publish-date"> <i class="far fa-clock fa-fw icon-date"></i>2022-03-24 </span> <span class="publish-author"> <i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/%E5%88%86%E7%B1%BB1/" class="post-category"> 分类1 </a> </span> </div> </div> <div class="card-action article-tags"> <a href="/tags/Github/"> <span class="chip bg-color">Github</span> </a> </div> </div> </div> </div> </article> </div> <!-- 代码块功能依赖 --> <script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script> <!-- 代码语言 --> <script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script> <!-- 代码块复制 --> <script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script> <!-- 代码块收缩 --> <script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script> </div> <div id="toc-aside" class="expanded col l3 hide-on-med-and-down"> <div class="toc-widget card" style="background-color: white;"> <div class="toc-title"><i class="far fa-list-alt"></i> 目录</div> <div id="toc-content"></div> </div> </div> </div> <!-- TOC 悬浮按钮. --> <div id="floating-toc-btn" class="hide-on-med-and-down"> <a class="btn-floating btn-large bg-color"> <i class="fas fa-list-ul"></i> </a> </div> <script src="/libs/tocbot/tocbot.min.js"></script> <script> $(function () { tocbot.init({ tocSelector: '#toc-content', contentSelector: '#articleContent', headingsOffset: -($(window).height() * 0.4 - 45), collapseDepth: Number('0'), headingSelector: 'h2, h3, h4' }); // Set scroll toc fixed. let tocHeight = parseInt($(window).height() * 0.4 - 64); let $tocWidget = $('.toc-widget'); $(window).scroll(function () { let scroll = $(window).scrollTop(); /* add post toc fixed. */ if (scroll > tocHeight) { $tocWidget.addClass('toc-fixed'); } else { $tocWidget.removeClass('toc-fixed'); } }); /* 修复文章卡片 div 的宽度. */ let fixPostCardWidth = function (srcId, targetId) { let srcDiv = $('#' + srcId); if (srcDiv.length === 0) { return; } let w = srcDiv.width(); if (w >= 450) { w = w + 21; } else if (w >= 350 && w < 450) { w = w + 18; } else if (w >= 300 && w < 350) { w = w + 16; } else { w = w + 14; } $('#' + targetId).width(w); }; // 切换TOC目录展开收缩的相关操作. const expandedClass = 'expanded'; let $tocAside = $('#toc-aside'); let $mainContent = $('#main-content'); $('#floating-toc-btn .btn-floating').click(function () { if ($tocAside.hasClass(expandedClass)) { $tocAside.removeClass(expandedClass).hide(); $mainContent.removeClass('l9'); } else { $tocAside.addClass(expandedClass).show(); $mainContent.addClass('l9'); } fixPostCardWidth('artDetail', 'prenext-posts'); }); }); </script> </main> <footer class="page-footer bg-color"> <link rel="stylesheet" href="/libs/aplayer/APlayer.min.css"> <style> .aplayer .aplayer-lrc p { display: none; font-size: 12px; font-weight: 700; line-height: 16px !important; } .aplayer .aplayer-lrc p.aplayer-lrc-current { display: none; font-size: 15px; color: #42b983; } .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body { left: -66px !important; } .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover { left: 0px !important; } </style> <div class=""> <div class="row"> <meting-js class="col l8 offset-l2 m10 offset-m1 s12" server="netease" type="playlist" id="503838841" fixed='true' autoplay='false' theme='#42b983' loop='all' order='random' preload='auto' volume='0.7' list-folded='true' > </meting-js> </div> </div> <script src="/libs/aplayer/APlayer.min.js"></script> <script src="/libs/aplayer/Meting.min.js"></script> <div class="container row center-align" style="margin-bottom: 0px !important;"> <div class="col s12 m8 l8 copy-right"> Copyright © <span id="year">2022</span> <a href="/about" target="_blank">John Doe</a> | Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> | Theme <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a> <br> <span id="busuanzi_container_site_pv"> | <i class="far fa-eye"></i> 总访问量: <span id="busuanzi_value_site_pv" class="white-color"></span> </span> <span id="busuanzi_container_site_uv"> | <i class="fas fa-users"></i> 总访问人数: <span id="busuanzi_value_site_uv" class="white-color"></span> </span> <br> <!-- 运行天数提醒. --> <br> </div> <div class="col s12 m4 l4 social-link social-statis"> <a href="https://github.com/blinkfox" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"> <i class="fab fa-github"></i> </a> <a href="mailto:1181062873@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50"> <i class="fas fa-envelope-open"></i> </a> <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1181062873" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1181062873" data-position="top" data-delay="50"> <i class="fab fa-qq"></i> </a> <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50"> <i class="fas fa-rss"></i> </a> </div> </div> </footer> <div class="progress-bar"></div> <!-- 搜索遮罩框 --> <div id="searchModal" class="modal"> <div class="modal-content"> <div class="search-header"> <span class="title"><i class="fas fa-search"></i> 搜索</span> <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字" class="search-input"> </div> <div id="searchResult"></div> </div> </div> <script type="text/javascript"> $(function () { var searchFunc = function (path, search_id, content_id) { 'use strict'; $.ajax({ url: path, dataType: "xml", success: function (xmlResponse) { // get the contents from search data var datas = $("entry", xmlResponse).map(function () { return { title: $("title", this).text(), content: $("content", this).text(), url: $("url", this).text() }; }).get(); var $input = document.getElementById(search_id); var $resultContent = document.getElementById(content_id); $input.addEventListener('input', function () { var str = '<ul class=\"search-result-list\">'; var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/); $resultContent.innerHTML = ""; if (this.value.trim().length <= 0) { return; } // perform local searching datas.forEach(function (data) { var isMatch = true; var data_title = data.title.trim().toLowerCase(); var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase(); var data_url = data.url; data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url; var index_title = -1; var index_content = -1; var first_occur = -1; // only match artiles with not empty titles and contents if (data_title !== '' && data_content !== '') { keywords.forEach(function (keyword, i) { index_title = data_title.indexOf(keyword); index_content = data_content.indexOf(keyword); if (index_title < 0 && index_content < 0) { isMatch = false; } else { if (index_content < 0) { index_content = 0; } if (i === 0) { first_occur = index_content; } } }); } // show search results if (isMatch) { str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>"; var content = data.content.trim().replace(/<[^>]+>/g, ""); if (first_occur >= 0) { // cut out 100 characters var start = first_occur - 20; var end = first_occur + 80; if (start < 0) { start = 0; } if (start === 0) { end = 100; } if (end > content.length) { end = content.length; } var match_content = content.substr(start, end); // highlight all keywords keywords.forEach(function (keyword) { var regS = new RegExp(keyword, "gi"); match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>"); }); str += "<p class=\"search-result\">" + match_content + "...</p>" } str += "</li>"; } }); str += "</ul>"; $resultContent.innerHTML = str; }); } }); }; searchFunc('/search.xml', 'searchInput', 'searchResult'); }); </script> <!-- 回到顶部按钮 --> <div id="backTop" class="top-scroll"> <a class="btn-floating btn-large waves-effect waves-light" href="#!"> <i class="fas fa-arrow-up"></i> </a> </div> <script src="/libs/materialize/materialize.min.js"></script> <script src="/libs/masonry/masonry.pkgd.min.js"></script> <script src="/libs/aos/aos.js"></script> <script src="/libs/scrollprogress/scrollProgress.min.js"></script> <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script> <script src="/js/matery.js"></script> <!-- 雪花特效 --> <!-- 鼠标星星特效 --> <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script> <script src="/libs/others/TencentCaptcha.js"></script> <button id="TencentCaptcha" data-appid="xxxxxxxxxx" data-cbfn="callback" type="button" hidden></button> <!-- Baidu Analytics --> <!-- Baidu Push --> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script src="/libs/others/clicklove.js" async="async"></script> <script async src="/libs/others/busuanzi.pure.mini.js"></script> <!--腾讯兔小巢--> <script src="/libs/instantpage/instantpage.js" type="module"></script> </body> </html>
描述：视频窗口手动(屏幕小的手机部分按键不可用，无弹幕)
描述：视频自适应窗口(调用哔哩哔哩动画窗口，高度498，宽度100%，有弹幕，限制全屏)
描述：本地插入视频测试(浏览器自带播放器，自适应，无弹幕)
描述：本地插入视频测试(网页视频下载，暂不可用)