WordPress 改造 mip-video 规范支持兼容 MP4 视频格式

张子凡 百度MIP 2018-06-25 22:18:16 阅读(...) 评论(5)

最近感觉过得还挺充实的，忙碌的工作生活中却有满满的幸福感，但是对于 Fanly MIP 主题支持 MP4 视频却迟迟没有提上日程，所以昨天晚上子凡就把 WordPress 支持兼容 mip-video 规范的 MP4 视频的代码就简单的折腾出来了，还没来得及更新到主题，因为还涉及到一些其他方面的升级测试，所以子凡就先将代码发布到泪雪博客上吧！

mip-video

相信有许多人的肯定应该是等了许久吧，其实很早之前感觉就应该支持这个 WordPress 默认的自带插入的视频兼容，其中一个原因是因为子凡的几个站点都没有做视频这方面，然后考虑着本来 MIP 主题的正对性其实就是博客方面的较多，上传使用 MP4 视频的用户应该几乎没有，不过最近确实遇到有这方面的需求，所以子凡也确实该挤点时间给弄上啦！

废话就不多说，通过 WordPress 媒体库上传插入的视频都是使用的 video 短代码的，而并不是直接插入 H5 格式的视频，所以为了保证兼容性，子凡就直接将 WordPress 的 video 短代码的源码拿出来直接改，这样就可以非常直接的拥有良好的兼容性，具体 WordPress 兼容 mip-video 规范的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

// WordPress mip-video 视频规范支持
remove_shortcode( 'video', 'wp_video_shortcode' );
add_shortcode( 'video', 'fanly_video_shortcode' );
function fanly_video_shortcode( $attr, $content = '' ) {
	global $content_width;
	$post_id = get_post() ? get_the_ID() : 0;
 
	static $instance = 0;
	$instance++;
 
	$override = apply_filters( 'wp_video_shortcode_override', '', $attr, $content, $instance );
	if ( '' !== $override ) {
		return $override;
	}
 
	$video = null;
 
	$default_types = wp_get_video_extensions();
	$defaults_atts = array(
		'src'      => '',
		'poster'   => '',
		'loop'     => '',
		'autoplay' => '',
		'preload'  => 'metadata',
		'width'    => 640,
		'height'   => 360,
		'class'    => 'fanly-mip-video',
	);
 
	foreach ( $default_types as $type ) {
		$defaults_atts[$type] = '';
	}
 
	$atts = shortcode_atts( $defaults_atts, $attr, 'video' );
 
	if ( is_admin() ) {
		// shrink the video so it isn't huge in the admin
		if ( $atts['width'] > $defaults_atts['width'] ) {
			$atts['height'] = round( ( $atts['height'] * $defaults_atts['width'] ) / $atts['width'] );
			$atts['width'] = $defaults_atts['width'];
		}
	} else {
		// if the video is bigger than the theme
		if ( ! empty( $content_width ) && $atts['width'] > $content_width ) {
			$atts['height'] = round( ( $atts['height'] * $content_width ) / $atts['width'] );
			$atts['width'] = $content_width;
		}
	}
 
	$library = apply_filters( 'wp_video_shortcode_library', 'mediaelement' );
	if ( 'mediaelement' === $library && did_action( 'init' ) ) {
		wp_enqueue_style( 'wp-mediaelement' );
		wp_enqueue_script( 'wp-mediaelement' );
	}
 
	if ( 'mediaelement' === $library ) {
		if ( $is_youtube ) {
			// Remove `feature` query arg and force SSL - see #40866.
			$atts['src'] = remove_query_arg( 'feature', $atts['src'] );
			$atts['src'] = set_url_scheme( $atts['src'], 'https' );
		} elseif ( $is_vimeo ) {
			// Remove all query arguments and force SSL - see #40866.
			$parsed_vimeo_url = wp_parse_url( $atts['src'] );
			$vimeo_src = 'https://' . $parsed_vimeo_url['host'] . $parsed_vimeo_url['path'];
 
			// Add loop param for mejs bug - see #40977, not needed after #39686.
			$loop = $atts['loop'] ? '1' : '0';
			$atts['src'] = add_query_arg( 'loop', $loop, $vimeo_src );
		}
	}
 
	$atts['class'] = apply_filters( 'wp_video_shortcode_class', $atts['class'] );
 
	$html_atts = array(
		'class'    => $atts['class'],
		//'id'       => sprintf( 'video-%d-%d', $post_id, $instance ),
		'width'    => absint( $atts['width'] ),
		'height'   => absint( $atts['height'] ),
		'poster'   => esc_url( $atts['poster'] ),
		'loop'     => wp_validate_boolean( $atts['loop'] ),
		'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
		'preload'  => $atts['preload'],
	);
 
	// These ones should just be omitted altogether if they are blank
	foreach ( array( 'poster', 'loop', 'autoplay', 'preload' ) as $a ) {
		if ( empty( $html_atts[$a] ) ) {
			unset( $html_atts[$a] );
		}
	}
 
	$attr_strings = array();
	foreach ( $html_atts as $k => $v ) {
		$attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
	}
 
	$html = '';
 
	$html .= sprintf( '<mip-video layout="responsive" %s controls="controls">', join( ' ', $attr_strings ) );
 
	$fileurl = '';
	$source = '<source type="%s" src="%s" />';
	foreach ( $default_types as $fallback ) {
		if ( ! empty( $atts[ $fallback ] ) ) {
			if ( empty( $fileurl ) ) {
				$fileurl = $atts[ $fallback ];
			}
			if ( 'src' === $fallback && $is_youtube ) {
				$type = array( 'type' => 'video/youtube' );
			} elseif ( 'src' === $fallback && $is_vimeo ) {
				$type = array( 'type' => 'video/vimeo' );
			} else {
				$type = wp_check_filetype( $atts[ $fallback ], wp_get_mime_types() );
			}
			$url = add_query_arg( '_', $instance, $atts[ $fallback ] );
			$html .= sprintf( $source, $type['type'], esc_url( $url ) );
		}
	}
 
	if ( ! empty( $content ) ) {
		if ( false !== strpos( $content, "\n" ) ) {
			$content = str_replace( array( "\r\n", "\n", "\t" ), '', $content );
		}
		$html .= trim( $content );
	}
 
	$html .= '</mip-video>';
 
	$output = $html;
 
	return apply_filters( 'fanly_video_shortcode', $output, $atts, $video, $post_id, $library );
}

直接将以上代码放置到你 WordPress 当前 MIP 主题的 functions.php 文件中即可，多的子凡就不说了，代码是子凡直接删减 WordPress video 短代码的片段，如果有其他问题大家可以留言告诉我，今天还在研究开发另外一个有意思的插件，所以就写到这里吧！

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/wordpress-mip-video.html

相关推荐

留言评论

登录 后留言

活在互联网

猜你喜欢

内页链接