zoukankan      html  css  js  c++  java
  • 网站网页视频播放插件简单调用

      近期做了一个小网站,其中一部分视频模块,所以考虑到了视频插件的调用问题。在寻找插件过程中分别使用了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=视频路径&amp;qualitymonitor.pluginmode=FLASH&amp;controlbar.position=over&amp;poster=封面图路径&amp;">
    </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
  • 相关阅读:
    SSM博客
    做完了第一个
    day08
    day07
    day06
    解决Zend OPcache huge_code_pages: mmap(HUGETLB) failed: Cannot allocate memory报错
    《响应式网页设计》系列分享专栏
    《Linux命令学习手册》系列分享专栏
    详解Docker 端口映射与容器互联
    centos7安装gitlab
  • 原文地址:https://www.cnblogs.com/zw0718/p/9755510.html
Copyright © 2011-2022 走看看