我在尝试让HTML视频像GIF一样运行时遇到了这个问题。WordPress的内置视频播放器使用HTML视频元素,但不允许同时播放视频。
我选择手动使用<video>
元素通过自定义短代码。为了获得最佳兼容性(especially on mobiles) 我们还应该确保视频也被静音。
添加以下代码后,只需使用:
[videogif mp4="http://path_to_file.mp4"]
你会有一个很好的视频工作。要控制样式和添加(基本)HTML视频控件,请使用以下命令:
[videogif mp4="http://path_to_file.mp4" style=\'width: 80%\' controls=\'1\']
将代码添加到
functions.php
:
// Video gif shortcode
function videogif($atts = [])
{
// normalize attribute keys, lowercase
$atts = array_change_key_case((array)$atts, CASE_LOWER);
// override default attributes with user attributes
$wporg_atts = shortcode_atts([
\'mp4\' => $atts[\'mp4\'],
\'style\' => null,
\'controls\' => False
], $atts);
// build output
$o = \'\';
$o .= \'<video autoplay loop muted playsinline \';
if ($wporg_atts[\'controls\']) $o .= \'controls \';
$o .= \'class="videogif"\';
if (!is_null($wporg_atts[\'style\'])) $o .= \'style="\' . $wporg_atts[\'style\'] . \'" \';
$o .= \'><source src="\' . $wporg_atts[\'mp4\'] . \'" type="video/mp4" />\';
$o .= \'<p>Your browser does not support the video element.</p></video>\';
// return output
return $o;
}
add_shortcode( \'videogif\', \'videogif\' );
默认情况下,我还使用以下CSS调整视频大小并将其居中:
/* Center videogif by default */
.videogif {
width: 100%;
display:block;
margin: 0 auto;
}