Widget:视频：修订间差异

来自HUIJIA FUN
可视化wikitext
无编辑摘要
标签：手工回退
无编辑摘要
标签：已被回退
第13行： 第13行：
}}
}}


This widget lets you embed '''[https://github.com/etianen/html5media HTML5 Video Media]''' on your wiki page.
This widget allows you to embed '''[https://github.com/etianen/html5media HTML5 Video Media]''' directly onto your wiki page.


It was created by [https://www.mediawikiwidgets.org/User:Taipan taipan].
It was created by [https://www.mediawikiwidgets.org/User:Taipan taipan].


== Using this widget ==
---
For information on how to use this widget, see [https://www.mediawikiwidgets.org/Video widget description page on MediaWikiWidgets.org].


== Copy to your site ==
## Using this widget
To use this widget on your site, install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} complete source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.
For detailed instructions on how to use this widget, please refer to the [https://www.mediawikiwidgets.org/Video widget description page on MediaWikiWidgets.org].
 
---
 
## Copy to your site
To use this widget on your own wiki, you'll need to install the [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension]. Once installed, copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} complete source code] of this page to your wiki as a page named '''{{FULLPAGENAME}}'''.
</noinclude><includeonly>
</noinclude><includeonly>
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
<style>
<style>
   .video-container {
   .video-wrapper-outer {
    /* This outer wrapper provides the necessary space in the document flow */
     position: relative;
     position: relative;
     width: <!--{$width|default:425|validate:int|escape:'html'}-->px;
     width: px; /* Set wrapper width based on widget parameter */
     height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
     height: px;
     margin-bottom: 15px;
     margin-bottom: 15px;
    background-color: #000; /* Black background for visual consistency */
    display: flex; /* Use flexbox to center content */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide anything that goes outside the wrapper */
   }
   }
   .video-load-btn {
   .video-load-btn {
     position: absolute;
     position: absolute;
第36行： 第47行：
     left: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     padding: 10px 20px;
     padding: 12px 25px; /* Slightly larger padding for better clickability */
     background: #4285f4;
     background: #4285f4;
     color: white;
     color: white;
第42行： 第53行：
     border-radius: 4px;
     border-radius: 4px;
     cursor: pointer;
     cursor: pointer;
     z-index: 10;
     z-index: 10; /* Ensure button is above video */
    font-size: 17px; /* Slightly larger font */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow for depth */
    transition: background 0.3s ease, transform 0.2s ease;
   }
   }
   .video-load-btn:hover {
   .video-load-btn:hover {
     background: #3367d6;
     background: #3367d6;
    transform: translate(-50%, -50%) scale(1.05); /* Slight scale on hover */
   }
   }
   .video-player {
   .video-player {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     display: none;
     display: none; /* Hidden by default */
    object-fit: contain; /* Ensures video fits within bounds, maintaining aspect ratio */
   }
   }
</style>
</style>


<div class="video-container">
<div class="video-wrapper-outer">
  <!-- Button will be removed after click -->
   <button class="video-load-btn"
   <button class="video-load-btn"  
           onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src=''; this.remove()">
           onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.remove()">
     ▶ Load Video
     ▶ Load Video
   </button>
   </button>
  <!-- Video element (hidden by default) -->
   <video class="video-player"
   <video class="video-player"  
         width=""
         width="<!--{$width|default:425|validate:int|escape:'html'}-->"  
         height=""
         height="<!--{$height|default:355|validate:int|escape:'html'}-->"  
         controls
         controls  
         preload="none"></video>
         preload="none"></video>
</div>
</div>
</includeonly>
</includeonly>

2025年7月5日 (六) 03:53的版本

{{#widget:视频
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|height=auto
}}

This widget allows you to embed HTML5 Video Media directly onto your wiki page.

It was created by taipan.

---

    1. Using this widget

For detailed instructions on how to use this widget, please refer to the widget description page on MediaWikiWidgets.org.

---

    1. Copy to your site

To use this widget on your own wiki, you'll need to install the MediaWiki Widgets extension. Once installed, copy the complete source code of this page to your wiki as a page named Widget:视频.

取自“https://huijia.fun/index.php?title=Widget:视频&oldid=1550”