Widget:视频:修订间差异

来自HUIJIA FUN
(修改页面)
无编辑摘要
 
(未显示同一用户的28个中间版本)
第2行: 第2行:
<pre>
<pre>
{{#widget:视频
{{#widget:视频
|url=https://vip.123pan.cn/1826204916/Dipfield/%E5%96%86%E6%BC%94%E8%AE%B2.mp4
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|width=640
|height=auto
|height=auto
第8行: 第8行:
</pre>
</pre>
{{#widget:视频
{{#widget:视频
|url=https://vip.123pan.cn/1826204916/Dipfield/%E5%96%86%E6%BC%94%E8%AE%B2.mp4
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|width=640
|height=auto
|height=auto
第22行: 第22行:
== Copy to your site ==
== Copy to your site ==
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}}'''.
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}}'''.
</noinclude>
</noinclude><includeonly>
<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><video src="<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->" width="<!--{$width|default:425|validate:int|escape:'html'}-->" height="<!--{$height|default:355|validate:int|escape:'html'}-->" controls preload></video>
<style>
  .video-container {
    position: relative;
    width: <!--{$width|default:425|validate:int|escape:'html'}-->px;
    height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
    margin-bottom: 15px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  .video-load-btn {
    padding: 10px 20px;
    background: #4285f4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .video-load-btn:hover {
    background: #3367d6;
  }
  .video-player {
    width: 100%;
    height: 100%;
    display: none;
  }
</style>
 
<div class="video-container">
  <!-- Button is part of normal flow -->
  <button class="video-load-btn"
          onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.style.display='none'">
    ▶ Load Video
  </button>
  <!-- Video element (hidden by default) -->
  <video class="video-player"
        width="<!--{$width|default:425|validate:int|escape:'html'}-->"  
        height="<!--{$height|default:355|validate:int|escape:'html'}-->"  
        controls  
        preload="none"></video>
</div>
</includeonly>
</includeonly>

2025年7月12日 (六) 14:11的最新版本

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

This widget lets you embed HTML5 Video Media on your wiki page.

It was created by taipan.

Using this widget

For information on how to use this widget, see widget description page on MediaWikiWidgets.org.

Copy to your site

To use this widget on your site, install MediaWiki Widgets extension and copy the complete source code of this page to your wiki as page Widget:视频.