近期做了一个小网站,其中一部分视频模块,所以考虑到了视频插件的调用问题。在寻找插件过程中分别使用了H5Video标签与Flvplayer、ckplayer、CuPlayerV4、HLSPlayer等插件方法的调用,楼主在此做一个简单的汇总,希望对大家有所帮助(文章后面会提供部分百度网盘下载地址):
H5 Video标签(Video支持视频格式:Ogg、MPEG 4、WebM):
<video id="video" controls="controls" preload="auto" poster="这里为封面图路径" width="100%" height="auto">
<source src="<?php echo base_url("这里为视频路径")?>" type="video/mp4">
</video>
Flvplayer(需要下载flvplayer.swf):
<embed type="application/x-shockwave-flash" width="100%" height="200"
pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="high" allowfullscreen="true"
src=flvplayer.swf所在路径?IsAutoPlay=0&BarPosition=1&IsShowBar=1&vcastr_file=视频路径>
</embed>
CKplayer(需下载ckplayer包,地址:http://www.ckplayer.com/down/,无法单独调用ckplayer.swf,详细设置参见官网,地址http://www.ckplayer.com/manualX/,这里只提供简单调用方法)
<embed src="包内的ckplayer.swf路径" flashvars="video=视频地址" quality="high"
width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash">
</embed>
CuPlayerV4(也需要下载CuPlayerV4包,官方下载似乎有问题,需要的在文后链接中提取)
<embed src="包内的ckplayer.swf路径" flashvars="&CuPlayerSetFile=CuPlayerSetFile.xml&CuPlayerFile=视频路径&
CuPlayerImage=封面图路径" quality="high" bgcolor="#000000" width="600" height="400" name="simplevideostreaming" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
HLSPlayer(需要下载HLSPlayer)
<embed src="HLSPlayer.swf路径" type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="100%" height="200" quality="high"
flashvars="file=视频路径&qualitymonitor.pluginmode=FLASH&controlbar.position=over&poster=封面图路径&">
</embed>
小结:H5video标签用起来十分方便无需引用任何插件,如果使用网页播放尽量选用mp4格式,视频转码请使用视频编码AVC(h264);
使用Flvplayer请注意原始视频的宽高尺寸,最大化时可能出先画面压缩放大情况;CuPlayerV4使用时忘记问题所在了,似乎是界面美观度的问题;HLSPlayer
暂未发现很明显的弊端,播放界面的右下角有个小鲸鱼图标,点击会有外链。
附件:1、ckplayer:链接: https://pan.baidu.com/s/1XSoJr9wJ8_Dd7YvumsKPlg 提取码: j5ur
2、CuPlayerV4:链接: https://pan.baidu.com/s/1_bcN7PxKSj6Ban9L1Th_Hg 提取码: n389
3、flvplayer.swf:链接: https://pan.baidu.com/s/1rrqruF3yODFH2R05_PiK8g 提取码: y3cu
4、HLSPlayer.swf:链接: https://pan.baidu.com/s/1AidrGBZ5KtOxmW4z9zltyA 提取码: qm75