html5视频播放器video player 选择

lilugirl

发布于 2019-05-26 21:17:43

2.8K0

发布于 2019-05-26 21:17:43

文章被收录于专栏：前端导学

网上能找到的好的支持html5的视频播放器非常有限，研究了几个还可以的，发现都有这样或者那样的问题，不是不给源代码，就是不支持全屏播放，要么就是界面难看没有提供模板。

后来发现能用的也就是projekktor。但是从projekktor官方网站上下载了代码安装到网上之后发现firefox的视频是无法加载的，测试了n次自己瞎找了n个原因都没有解决，后来还是在官网论坛上看到了解决方案。

flash视频播放器必须用url全地址，用以下示例代码在所有浏览器上测试均没有问题。坑爹啊，为了找一个好的视频播放器，我容易吗，虽然projekktor的界面我还是觉得不够满意，但是能找到像样的，而且是免费的，我还能说啥呢。

<!-- lang: html -->
  <!DOCTYPE HTML>
<html>
<head>
<title>Projekktor Version 8 Test</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <!-- Load jquery -->
<script type="text/javascript" src="projekktor-1.2.04r140.min.js"></script> <!-- load projekktor -->
</head>
<body>
<video id="player_a" class="projekktor" poster="intro.png" title="this is projekktor" width="640" height="360" controls>
<source src="http://www.projekktor.com/intro.ogv" type="video/ogg" />
<source src="http://www.projekktor.com/intro.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
$(document).ready(function() {
projekktor('#player_a', {
    volume: 0.8,
    playerFlashMP4: 'http://www.yoursite.com/jarisplayer.swf',
    playerFlashMP3: 'http://www.yoursite.com/jarisplayer.swf',
    plugin_display: {
     logoImage:"intro.png",
     logoURL:"http://www.yoursite.com/",
     target:"_blank"
    }
});
});
</script>
</body>
</html>

后记，后发现ogv这种格式可能在生成的时候就可以限制播放的域名，所以导致某些ogv只能在特定的域名下播放，后来找了国内一个叫cc视频的http://www.bokecc.com 提供播放代码来的比较方便。国外有http://corp.kaltura.com/

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

http