网站不同,操作大同小异,在如今网络上的信息量日渐膨胀的前提下,网站对数据信息的多样化和个性化设计也愈加的重视。多媒体技术逐渐发展和提高给在线展示的形式从视频、音频、PPT、图表等发展到视频中提供了条件。
今天讨论网页中插入视频的方案,咱不讨论video标签的使用方法,video标签比较兼容的写法为:
1 2 3 4 5 6 7 8 9 当前浏览器不支持 video直接播放,点击这里下载视频: 下载视频10
但是一般不会同一个视频生成MP4、ogg、webm和swf(flash)四种格式的视频,原因是太占用时间了。
讨论的第一种方案是:将视频上传到爱奇艺、优酷和腾讯等第三方视频网站上,在使用第三方网站提供的代码(在视频下方的“分享”按钮中即可找到),具体测试代码为:
1 2 3 4
5 6 7 8 网页中插入视频的方法 9 25 26 27 28 29网页显示效果为:
需要说明的是:在第三方视频网站上分享代码中选择通用的代码,这样可以使得PC端和移动端均能良好的展现视频。
讨论的第二种方案是:使用ckplayer插件。
ckplayer插件的官网为:
官网上有在线配置功能,根据自己的需要进行配置,其中一个比较好测试代码为ckplayer调用html5播放器,
1 2 3 4
5 6 ckplayer调用html5播放器 7 8 9 10 12 13 28 29 30PC效果为:
移动端效果为:
说明:视频只需要使用目前浏览器支持最多的MP4格式即可,需要处理的视频格式少。其次是使用ckplayer插件可以比较完美的兼容PC和移动端浏览器(经测试IE8 视频播放不了)。
总结:
优先建议将视频上传到第三方视频网站,兼容性好,同时视频加载快,不会占用网站服务器的带宽资源。
其次使用ckplayer插件在网页中插入本地视频。