wordpress 自定义简码视频标签 mp4

Question

视频不播放（时间为零），但所有控件都存在。 Forefox 或 Chrome... 说“没有找到支持格式或 mime 类型的视频”我还尝试根据 w3c.org 规范在 type 属性中添加额外数据。我在 cmets 中包含了 mp4 的元数据。

<!-- video metadata: ---------------- error = GETID3_VERSION = 1.9.14-201706111222 FILESIZE = 15761394 FILEPATH = /home/sfcad/public_html/wp-content/uploads/2018/06 FILENAME = stump-trivia-50cent-wings.mp4 FILENAMEPATH = /home/sfcad/public_html/wp-content/uploads/2018/06/stump-trivia-50cent-wings.mp4 AVDATAOFFSET = 44 AVDATAEND = 15761394 FILEFORMAT = mp4  DATAFORMAT = mp4  CODEC = ISO/IEC 14496-3 AAC  SAMPLE_RATE = 44100  CHANNELS = 2  BITS_PER_SAMPLE = 16  LOSSLESS =  CHANNELMODE = stereo  STREAMS   0 = Array  DATAFORMAT = mpeg4  RESOLUTION_X = 1280  RESOLUTION_Y = 720  FOURCC = mp4v  FRAME_RATE = 25  QUICKTIME   ENCODING_TOOL = Array  LANGUAGE   0 = English ENCODING = UTF-8 MIME_TYPE = video/mp4  HINTING =  CONTROLLER = standard  FTYP   HIERARCHY = ftyp   NAME = ftyp   SIZE = 28   OFFSET = 0   SIGNATURE = isom   UNKNOWN_1 = 512   FOURCC = isom  FREE   HIERARCHY = free   NAME = free   SIZE = 8   OFFSET = 28  MDAT   HIERAapplication/x-shockwave-flashRCHY = mdat   NAME = mdat   SIZE = 15748861   OFFSET = 36  MOOV   HIERARCHY = moov   NAME = moov   SIZE = 12497   OFFSET = 15748897   SUBATOMS = Array  TIME_SCALE = 44100  DISPLAY_SCALE = 1  VIDEO   RESOLUTION_X = 1280   RESOLUTION_Y = 720   FRAME_RATE = 25   FRAME_COUNT = 513  STTS_FRAMECOUNT   0 = 513 1 = 879  AUDIO   CODEC = mp4   SAMPLE_RATE = 44100   CHANNELS = 2   BIT_DEPTH = 16  COMMENTS   ENCODING_TOOL = Array  ENCODING = UTF-8 PLAYTIME_SECONDS = 20.52 BITRATE = 6144775.82846  QUICKTIME   ENCODING_TOOL = Array PLAYTIME_STRING = 0:21  -->
// functions.php
function videoshort($atts = []) {
// override attributes & normalize
$atts = array_change_key_case((array)$atts, CASE_LOWER);
$sfc_atts = shortcode_atts([
        'src' => $atts['src'],
        'type' => $atts['type'], // video/mp4
        'style' => $atts['style'],
        'controls' => $atts['controls'],
        'class' => $atts['class'],
        'id' => $atts['id'],
        'width' => $atts['width'],
        'height' => $atts['height'],
        'autoplay' => $atts['autoplay'],
        'loop' => null,
        /** Access-Control-Allow-Origin: *     **/
        'crossorigin' => $atts['crossorigin'],
        'preload' => $atts['preload'],
        'poster' => $atts['poster'],
        'playsinline' =>  null,
        'muted' =>  null,
    ], $atts);
// html output
$html = "";
$html .= "<video ";

foreach($sfc_atts as $k => $v):
    echo "<!-- {$k}  =  {$v}  -->";
    if ( !is_null($k) ):
        if( !($k=="src") && !($k=="type" ) ):
                $html .= " {$k}='{$v}' ";
        endif;
    endif;
endforeach;

$html .= "><source src='{$sfc_atts["src"]}' type='{$sfc_atts["type"]}' />";
$html .= "<i> ...no browser support...</i></video>";
// return html
return $html;
}add_shortcode( 'videoshort', 'videoshort' );
// shortcode
[videoshort 
style="float:left;display:inline;" 
src="http:\/\/7central.net\/wp-content\/themes\/Avada\/assets\/videos\/stump-trivia-50cent-wings.mp4" 
width="267" height="150" 
controls="1" id="videogif1" 
class="seven-central-entertainment-float-left-responsive" 
preload="metadata"  
autoplay="on" 
type="mp4" 
poster="http:\/\/7central.net\/wp-content\/uploads\/2018\/06\/transparent.png" 
crossorigin="anonymous"]

带有url的标签属性中的转义正斜杠是为了保护短代码处理...... 谢谢

Answer 1

我将带有 vlc 的 mp4 转换为 webm(VP8-VORBIS) 并且它工作正常。 webm 适用于 chrome 和 firefox，而不是 safari。我转换为 mp4 (mp4 H.264)，它在 chrome 和 firefox 中不起作用，但在 safari 中起作用。我添加了 2 个简码 atts（src_web 和 type_webm）并为其设置了第二个源标签，所以现在根据浏览器，分发了正确的文件。我还添加了直接的 javascript 来关闭循环并静音（并显示其他数据......）

(function( $ ) {
    // prevent looping on videos...
    var firstDOMVideo = document.getElementsByTagName('video')[0];
    console.log("video dimensions: video width - "+firstDOMVideo.videoWidth+"  video height - "+firstDOMVideo.videoHeight);
    console.log("actual video dimensions: video width - "+firstDOMVideo.width+"  video height - "+firstDOMVideo.height);
    if (typeof firstDOMVideo.loop == 'boolean') firstDOMVideo.loop = false;
    if (typeof firstDOMVideo.muted == 'boolean') firstDOMVideo.muted = false;
    if (typeof firstDOMVideo.autoplay == 'boolean') firstDOMVideo.autoplay = true;
    // first video in the DOM has ended...     (   getElementsByTagName('video')[0]           )
    // bug fix in Safari
    firstDOMVideo.addEventListener('ended', function(e){
        firstDOMVideo.pause();
    }, false);
    for(var types = ['mp4','webm'], i = 0; i < types.length; i ++){
            if(/(maybe|proba.addEventListenerbly)/.test(firstDOMVideo.canPlayType('video/' + types[i]))) console.log("supports : video/" + types[i]+" ");
    }
    firstDOMVideo.addEventListener("timeupdate", function(e){
        console.log("total time = ", firstDOMVideo.duration/60+ " seconds");
    }, false);
 //firstDOMVideo.play(); 
})();