花好月圆不常有 阴晴圆缺是常态
Your browser does not support the video tag 说的好,值得干一大碗 关于Discuz网站视频标签不支持的问题,以下是专业解决方案:一、常见原因分析:
1. 浏览器兼容性问题:IE10以下及老旧浏览器不支持HTML5 video标签
2. 视频格式缺陷:未同时提供MP4/WebM/Ogg三种格式
3. Discuz设置限制:后台未开启视频附件支持
4. 代码嵌套错误:video标签未正确闭合或属性设置不当
二、解决方案步骤:
1. 后台设置检查:
通过「DZ管理中心-全局-上传设置-文件后缀」确认已开启mp4/webm/ogg格式上传权限(需FTP调整服务器上传限制)
2. 多格式转码方案:
推荐使用FFmpeg生成三套格式:
// 视频处理示例代码
$video_path = '/data/attachment/video/';
exec("ffmpeg -i input.mp4 -c:v libx264 -profile:v high -level 4.0 output.mp4");
exec("ffmpeg -i input.mp4 -c:v libvpx -b:v 1M -c:a libvorbis output.webm");
exec("ffmpeg -i input.mp4 -c:v libtheora -c:a libvorbis output.ogv");
3. 前端兼容写法:
<video controls width="100%">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<!-- 降级方案 -->
<div class="video-alert">
<p>推荐使用现代浏览器访问:<br>
<a href="//www.dz-x.net/browser" target="_blank">点击下载最新浏览器</a></p>
<a href="video.mp4">直接下载MP4视频</a>
</div>
</video>
三、高级适配方案:
1. 服务端检测:
// 检测浏览器是否支持HTML5 video
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$is_legacy_browser = preg_match('/(MSIE|Trident|Opera Mini)/i', $user_agent);
if($is_legacy_browser) {
include template('common/legacy_video');
} else {
include template('common/html5_video');
}
2. CSS降级样式:
.video-alert {
border: 1px solid #ffd700;
padding: 15px;
background: #fff8e7;
margin: 10px 0;
}
.video-alert a {
color: #06c;
border-bottom: 1px dashed;
}
四、Discuz深度整合建议:
1. 在source/module/forum/forum_attachment.php中增加视频类型判断:
if(in_array($fileext, array('mp4','webm','ogv'))){
$is_video = true;
$tpl = 'forum/video_player';
}
2. 创建template/default/forum/video_player.htm模板文件:
<div class="video-wrapper" id="video_{$_G}">
<!-- 此处嵌入上述视频代码 -->
</div>
五、移动端适配要点:
1. 增加playsinline属性:
<video playsinline webkit-playsinline x5-playsinline>
2. 响应式CSS方案:
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
如需进一步优化视频播放体验,可参考DZ插件网的视频增强方案,获取专业级的播放器组件集成方案。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。
页:
[1]