{"id":266,"date":"2026-08-31T12:57:27","date_gmt":"2026-08-31T04:57:27","guid":{"rendered":"https:\/\/www.piuido.cn\/?p=266"},"modified":"2026-08-31T14:02:10","modified_gmt":"2026-08-31T06:02:10","slug":"zp-bilibili","status":"publish","type":"post","link":"https:\/\/www.piuido.cn\/index.php\/2026\/08\/31\/zp-bilibili\/","title":{"rendered":"\u4e2a\u4eba\u4f5c\u54c1\u96c6\/B\u7ad9\u8fbe\u4eba\u7c7b"},"content":{"rendered":"<p><!-- Plyr \u64ad\u653e\u5668\u6837\u5f0f -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/plyr@3.7.8\/dist\/plyr.css\">\n<style>\n.portfolio-video {\n    --video-ratio: 16 \/ 9;\n    width: 100%;\n    margin: 0 auto 28px;\n    background: transparent;\n}<\/p>\n<p>.portfolio-video .plyr {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    background: #000;\n}<\/p>\n<p>.portfolio-video .plyr__video-wrapper {\n    width: 100%;\n    height: auto !important;\n    aspect-ratio: var(--video-ratio) !important;\n    padding-bottom: 0 !important;\n    background: #000;\n}<\/p>\n<p>.portfolio-video video {\n    display: block;\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: contain;\n    background: #000;\n}<\/p>\n<p>@media (max-width: 768px) {\n    .portfolio-video {\n        width: 100%;\n        margin-bottom: 20px;\n    }<\/p>\n<p>    .portfolio-video .plyr {\n        max-width: 100% !important;\n    }\n}\n<\/style>\n<h3>AE\u5305\u88c5-\u77e5\u8bc6\u533a<\/h3>\n<h4>\u5c0f\u7ea6\u7ff0\u53ef\u6c57<\/h4>\n<div class=\"portfolio-video\">\n    <video class=\"portfolio-player-bili\" controls playsinline preload=\"metadata\"><source \nsrc=\"https:\/\/video.zzz2.net\/BiliBili\/AE-ZS-XYH.mp4\"\n            type=\"video\/mp4\"><\/video>\n<\/div>\n<h3>AE\u5305\u88c5-\u519b\u4e8b\u533a<\/h3>\n<h4>\u98de\u7fbd\u793e<\/h4>\n<div class=\"portfolio-video\">\n    <video class=\"portfolio-player-bili\" controls playsinline preload=\"metadata\"><source \nsrc=\"https:\/\/video.zzz2.net\/BiliBili\/AE-JS-FYS.mp4\"\n            type=\"video\/mp4\"><\/video>\n<\/div>\n<h3>AE\u5305\u88c5-\u5f71\u8bc4\u533a<\/h3>\n<h4>\u6cab\u5b50<\/h4>\n<div class=\"portfolio-video\">\n    <video class=\"portfolio-player-bili\" controls playsinline preload=\"metadata\"><source \nsrc=\"https:\/\/video.zzz2.net\/BiliBili\/AE-MZ.mp4\"\n            type=\"video\/mp4\"><\/video>\n<\/div>\n<h4>\u6e24\u6d77\u5c0f\u540f<\/h4>\n<div class=\"portfolio-video\">\n    <video class=\"portfolio-player-bili\" controls playsinline preload=\"metadata\"><source \nsrc=\"https:\/\/video.zzz2.net\/BiliBili\/AE-YP-BHXL.mp4\"\n            type=\"video\/mp4\"><\/video>\n<\/div>\n<h3>\u5bb6\u7eba\u5b9e\u62cd\u7c7b<\/h3>\n<h4>\u88ab\u5b50\u6d4b\u8bc4<\/h4>\n<div class=\"portfolio-video\">\n    <video class=\"portfolio-player-bili\" controls playsinline preload=\"metadata\"><source \nsrc=\"https:\/\/video.zzz2.net\/BiliBili\/JF-BZ.mp4\"\n            type=\"video\/mp4\"><\/video>\n<\/div>\n<h3>\u901a\u4fe1\u4e1a\u52a1\u7c7b<\/h3>\n<h4>\u6d41\u91cf\u5361\u6d4b\u8bc4<\/h4>\n<div class=\"portfolio-video\">\n    <video class=\"portfolio-player-bili\" controls playsinline preload=\"metadata\"><source \nsrc=\"https:\/\/video.zzz2.net\/BiliBili\/TX-LLK.mp4\"\n            type=\"video\/mp4\"><\/video>\n<\/div>\n<p><!-- Plyr \u64ad\u653e\u5668 --><br \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/plyr@3.7.8\/dist\/plyr.polyfilled.js\"><\/script><br \/>\n<script>\n(function () {<\/p>\n<p>    const videos = document.querySelectorAll('.portfolio-player-bili');\n    const players = [];<\/p>\n<p>    videos.forEach((video) => {<\/p>\n<p>        const container = video.closest('.portfolio-video');<\/p>\n<p>        function applyVideoRatio() {<\/p>\n<p>            const w = video.videoWidth;\n            const h = video.videoHeight;<\/p>\n<p>            if (!w || !h) return;<\/p>\n<p>            const ratio = w \/ h;<\/p>\n<p>            \/*\n             * \u6839\u636e\u89c6\u9891\u771f\u5b9e\u5206\u8fa8\u7387\n             * \u81ea\u52a8\u8c03\u6574\u64ad\u653e\u5668\u753b\u5e45\n             *\/\n            container.style.setProperty(\n                '--video-ratio',\n                w + ' \/ ' + h\n            );<\/p>\n<p>            \/*\n             * \u6a2a\u5c4f\uff1a\n             * \u5360\u6ee1\u535a\u5ba2\u6b63\u6587\u5bbd\u5ea6\n             *\n             * \u7ad6\u5c4f\uff1a\n             * \u6700\u5927\u7ea6 720px \u9ad8\u5e76\u81ea\u52a8\u8ba1\u7b97\u5bbd\u5ea6\n             *\/\n            if (ratio < 1) {\n\n                const portraitWidth = Math.round(720 * ratio);\n\n                container.style.maxWidth =\n                    portraitWidth + 'px';\n\n            } else {\n\n                container.style.maxWidth = '100%';\n\n            }\n        }\n\n        if (video.readyState >= 1) {\n            applyVideoRatio();\n        }<\/p>\n<p>        video.addEventListener(\n            'loadedmetadata',\n            applyVideoRatio\n        );<\/p>\n<p>        const player = new Plyr(video, {<\/p>\n<p>            autoplay: false,<\/p>\n<p>            controls: [\n                'play-large',\n                'play',\n                'progress',\n                'current-time',\n                'duration',\n                'mute',\n                'volume',\n                'settings',\n                'pip',\n                'fullscreen'\n            ],<\/p>\n<p>            settings: [\n                'speed'\n            ],<\/p>\n<p>            speed: {<\/p>\n<p>                selected: 1,<\/p>\n<p>                options: [\n                    0.5,\n                    0.75,\n                    1,\n                    1.25,\n                    1.5,\n                    2\n                ]<\/p>\n<p>            }<\/p>\n<p>        });<\/p>\n<p>        players.push(player);<\/p>\n<p>        \/*\n         * \u64ad\u653e\u5f53\u524d\u4f5c\u54c1\u65f6\n         * \u81ea\u52a8\u6682\u505c\u5176\u4ed6\u4f5c\u54c1\n         *\/\n        player.on('play', () => {<\/p>\n<p>            players.forEach((otherPlayer) => {<\/p>\n<p>                if (\n                    otherPlayer !== player &&\n                    otherPlayer.playing\n                ) {\n                    otherPlayer.pause();\n                }<\/p>\n<p>            });<\/p>\n<p>        });<\/p>\n<p>    });<\/p>\n<p>})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AE\u5305\u88c5-\u77e5\u8bc6\u533a \u5c0f\u7ea6\u7ff0\u53ef\u6c57 AE\u5305\u88c5-\u519b\u4e8b\u533a \u98de\u7fbd\u793e AE\u5305\u88c5-\u5f71\u8bc4\u533a \u6cab\u5b50 \u6e24\u6d77\u5c0f\u540f \u5bb6\u7eba\u5b9e\u62cd\u7c7b \u88ab\u5b50\u6d4b\u8bc4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5,19],"tags":[],"class_list":["post-266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ae","category-video","category-19"],"_links":{"self":[{"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":1,"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":267,"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/posts\/266\/revisions\/267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/media\/275"}],"wp:attachment":[{"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.piuido.cn\/index.php\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}