最近,也就是过年来了这段时间,我忽然对《明天会更好》这首老歌很感兴趣了,于是昨天便在自己的博客里面分享出了这首歌,当然我选择的是以HTML5 方式展现出来.
在此感谢下W3Schools,让我能够快速上手HTML5 的一些标签.
我是在优酷网下载的该MV,flv格式的,不易于分享,于是便转成了更加开放的ogg.
在视频转换方面,我使用的是ffmpeg2theora工具.
我把转换好的ogv文件上传到我自己的服务器上,按照w3school上的例子,把相对路径改成了绝对路径,便了事了。我认为不会有什么问题了,也没有去测试能否播放。
直到今早,我打开我的博客,出人意料的是,我的chrome崩溃了。我开始猜到是html5的问题.
果然,视频不能播放,可是下载没有问题。说明不是权限问题。
也不可能是视频编码的问题,因为我昨天在本地测试过了,是可以播放的。
我百思不得其解,谷歌搜索了一下,在这里找到了答案.
原来是服务器的文件类型 MIME-type 在作怪.因为我服务器中的所有静态文件/资源文件都是由nginx在处理的。而nginx 默认的mime-types 里面没有 ogv 类型.
添加即可,加入
重启nginx即可.
注:如果ogg文件是视频的,必须为以上内容。参见:https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements#Recognized_MIME.c2.a0types_for_Ogg_media
再测试下,火狐已经可以播放了,不过chrome还是崩溃.
这又是怎么回事? 待解.
在此感谢下W3Schools,让我能够快速上手HTML5 的一些标签.
我是在优酷网下载的该MV,flv格式的,不易于分享,于是便转成了更加开放的ogg.
在视频转换方面,我使用的是ffmpeg2theora工具.
ffmpeg2theora -x 400 -y 350 --sync xxx.flv
我把转换好的ogv文件上传到我自己的服务器上,按照w3school上的例子,把相对路径改成了绝对路径,便了事了。我认为不会有什么问题了,也没有去测试能否播放。
直到今早,我打开我的博客,出人意料的是,我的chrome崩溃了。我开始猜到是html5的问题.
果然,视频不能播放,可是下载没有问题。说明不是权限问题。
也不可能是视频编码的问题,因为我昨天在本地测试过了,是可以播放的。
我百思不得其解,谷歌搜索了一下,在这里找到了答案.
原来是服务器的文件类型 MIME-type 在作怪.因为我服务器中的所有静态文件/资源文件都是由nginx在处理的。而nginx 默认的mime-types 里面没有 ogv 类型.
添加即可,加入
video/ogg ogg;
video/ogg ogv;
重启nginx即可.
注:如果ogg文件是视频的,必须为以上内容。参见:https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements#Recognized_MIME.c2.a0types_for_Ogg_media
再测试下,火狐已经可以播放了,不过chrome还是崩溃.
这又是怎么回事? 待解.