Widget:视频：修订间差异

来自HUIJIA FUN
可视化wikitext
无编辑摘要
标签：已被回退
无编辑摘要
 
（未显示同一用户的16个中间版本）
第4行： 第4行：
|url=https://vip.123pan.cn/1826204916/5651071
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|width=640
|height=360
|height=auto
}}
}}
</pre>
</pre>
第10行： 第10行：
|url=https://vip.123pan.cn/1826204916/5651071
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|width=640
|height=360
|height=auto
}}
}}


第18行： 第18行：


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


== Copy to your site ==
== Copy to your site ==
Install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source] to '''{{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><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-container {
  position: relative;
    position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
    width: <!--{$width|default:425|validate:int|escape:'html'}-->px;
  width: 100%;
    height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
  margin-bottom: 15px;
    margin-bottom: 15px;
}
    background: #f5f5f5;
 
    display: flex;
.video-player, .video-load-btn {
    align-items: center;
  position: absolute;
    justify-content: center;
  top: 0;
    border-radius: 4px;
  left: 0;
  }
  width: 100%;
   .video-load-btn {
  height: 100%;
    padding: 10px 20px;
}
    background: #4285f4;
 
    color: white;
.video-load-btn {
    border: none;
  display: flex;
    border-radius: 4px;
  align-items: center;
    cursor: pointer;
  justify-content: center;
    transition: background 0.2s;
   font-size: 18px;
  }
  background: #4285f4;
  .video-load-btn:hover {
  color: white;
    background: #3367d6;
  border: none;
  }
  border-radius: 6px;
  .video-player {
  cursor: pointer;
    width: 100%;
  z-index: 2;
    height: 100%;
  transition: background 0.3s;
    display: none;
}
   }
.video-load-btn:hover {
  background: #3367d6;
}
 
.video-player {
  display: none;
   object-fit: cover;
}
</style>
</style>


<div class="video-container"  
<div class="video-container">
    data-url="<!--{$url|validate:url|escape:'html'}-->"  
  <!-- Button is part of normal flow -->
    data-width="<!--{$width|default:640|validate:int|escape:'html'}-->"  
  <button class="video-load-btn"
    data-height="<!--{$height|default:360|validate:int|escape:'html'}-->">
          onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.style.display='none'">
  <button class="video-load-btn" onclick="loadWidgetVideo(this)">▶ Load Video</button>
    ▶ Load Video
  <video class="video-player" controls preload="none"></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>
</div>
<script>
function loadWidgetVideo(button) {
  const container = button.closest('.video-container');
  const video = container.querySelector('.video-player');
  const url = container.dataset.url;
  const width = container.dataset.width;
  const height = container.dataset.height;
  if (url) {
    video.src = url;
    video.style.display = 'block';
    video.width = width;
    video.height = height;
    button.remove();
  } else {
    button.textContent = '⚠️ Video URL Missing';
  }
}
</script>
</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:视频.

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