Wordpress插入Video视频

html5的video如果直接在文中使用可能会出现视频很小或很大的问题, 可以使用下面的方法解决


代码一,纯HTML5视频自动循环播放

<!DOCTYPE HTML>
<html>
<body>
<video controls="controls" loop="loop" autoplay="autoplay" style="width:100%;vertical-align:middle;">
    <source src="movie.ogg" type="video/ogg" />
    <source src="https://cdn.jsdelivr.net/gh/Littlemyself/grli@main/12.mp4" type="video/mp4" />
</video>
</body>
</html>

不过火狐浏览器貌似默认禁止自动播放音频视频,需要到选项 → 隐私与安全 → 自动播放,设置允许音频和视频。

如果不设置就可以自动播放,可以使用代码二。

代码二,配合JS自动循环播放

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML5视频自动循环播放</title>
 </head>
 <body>
    <video id="videoID" controls="controls" style="width:100%;vertical-align:middle;">
      <source src="https://cdn.jsdelivr.net/gh/Littlemyself/grli@main/12.mp4" type="video/mp4"/>
    </video>
 </body>
<script  type="text/javascript">
window.onload = function() {
    var local1=document.getElementById('videoID');  //获取,函数执行完成后local内存释放
    local1.autoplay = true; // 自动播放
    local1.loop = true; // 循环播放
    local1.muted=true; // 关闭声音,如果为false,视频无法自动播放
    if(local1.paused){  //判断是否处于暂停状态
        local1.play();  //开启播放
    } else {
        local1.pause();  //停止播放
    }
}
function btn(){
    var local=document.getElementById('videoID');  //获取,函数执行完成后local内存释放
    if(local.paused){  //判断是否处于暂停状态
        local.play();  //开启播放
    } else {
        local.pause();  //停止播放
    }
}
</script>
</html>

不想显示播放控制按钮可以将controls="controls"删除。

代码中外链的广告视频,加载可能有点慢,换成自己的MP4视频。

其中:width:100%视频自动100%显示,vertical-align:middle用于消除视频下面的空隙。

Video相关属性:

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。autoplay="autoplay"
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。controls="controls"
heightpixels设置视频播放器的高度。height="240"
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。loop="loop"
mutedmuted规定视频的音频输出应该被静音。muted
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。poster="/img/wl.gif"
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。preload="auto"
srcurl要播放的视频的 URL。src="movie.ogg"
widthpixels设置视频播放器的宽度。width="320"
webkit-playsinline在移动端使用该属性不会显示系统控制条webkit-playsinline

防止视频右键另存为

<script type="text/javascript">
var myVideo=document.getElementById("load_video");
$('#load_video').bind('contextmenu',function() { return false; });
</script>

虽然不能右键保存,但是还是会有办法保存

RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
HMAU » Wordpress插入Video视频