Widget:视频：修订间差异

来自HUIJIA FUN
可视化wikitext
无编辑摘要
无编辑摘要
第25行： 第25行：
<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>
<div class="video-container">
  <video id="videoPlayer-<!--{$unique_id|escape:'html'}-->"
        width="<!--{$width|default:425|validate:int|escape:'html'}-->"
        height="<!--{$height|default:355|validate:int|escape:'html'}-->"
        controls>
    Your browser does not support HTML5 video.
  </video>
  <button class="load-video-btn"
          onclick="loadVideo('videoPlayer-<!--{$unique_id|escape:'html'}-->', '<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->')">
    Load Video
  </button>
</div>
<style>
<style>
   .load-video-btn {
   .video-container {
     display: block;
    position: relative;
     margin-top: 8px;
    width: <!--{$width|default:425|validate:int|escape:'html'}-->px;
     padding: 8px 16px;
    height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
     background: #4CAF50;
    margin-bottom: 15px;
  }
  .video-load-btn {
     position: absolute;
     top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
     padding: 10px 20px;
     background: #4285f4;
     color: white;
     color: white;
     border: none;
     border: none;
     border-radius: 4px;
     border-radius: 4px;
     cursor: pointer;
     cursor: pointer;
    z-index: 10;
   }
   }
   .load-video-btn:hover {
   .video-load-btn:hover {
     background: #45a049;
     background: #3367d6;
  }
  .video-player {
    width: 100%;
    height: 100%;
    display: none;
   }
   }
</style>
</style>
<script>
 
   function loadVideo(playerId, url) {
<div class="video-container">
    var player = document.getElementById(playerId);
   <!-- Button will be removed after click -->
    var btn = player.nextElementSibling;
  <button class="video-load-btn"
   
          onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.remove()">
    player.setAttribute('src', url);
     Load Video
    player.setAttribute('preload', 'auto');
  </button>
     btn.style.display = 'none';
  <!-- Video element (hidden by default) -->
    player.style.display = 'block';
  <video class="video-player"
  }
        width="<!--{$width|default:425|validate:int|escape:'html'}-->"
</script>
        height="<!--{$height|default:355|validate:int|escape:'html'}-->"
        controls
        preload="none"></video>
</div>
</includeonly>
</includeonly>

2025年4月5日 (六) 21:13的版本

{{#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=1287”