免费的 Web 视频播放器 Projekktor

HTML5 herman 1637浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

Projekktor 视频播放器不仅免费而且功能强大。和《jQuery 视频播放器 Jquery-video-extend 详解》视频播放器相比,更加实用。Projekktor 支持片头、片中、片尾广告功能。支持 flash RTMP 等特性,并且拥有多个主题。

Projekktor 视频播放器

Projekktor 官方地址:http://www.projekktor.com/

Projekktor 源代码和demo下载地址:https://github.com/frankyghost/projekktor

Projekktor 10大特性

  • Pre- & Postroll Ads (VAST)* 支持插入广告功能
  • True Fullscreen (where applicable) 兼容所有应用的全屏功能
  • Build Playlists, stream Channels 创建 playlists 支持流视频
  • Flash fallback with RTMP support 支持flash RTMP
  • VLC Web Plugin support 支持vlc Web插件
  • OSMF support for HDS streaming and DVR 支持 来自 Adobe 的 HDS 和 DVR 换流(流切换)
  • Quality selection and toggling 支持选择视频模式,高清,标清,蓝光,超清等
  • Easy to integrate and theme 多个主题选择和自定义主题支持
  • Unified Javascript API tong 统一的 JavaScript API
  • Cue-Points for media synced events * additional plugin required 支持 synced for媒体事件,同时支持插件扩展。

Projekktor 视频播放器

<!DOCTYPE HTML>
<html>
<head>
    <title>Projekktor - simply mighty video</title>
    <style type="text/css">
    body { background-color: #fdfdfd; padding: 0 20px; color:#000; font: 13px/18px monospace; width: 800px;}
    a { color: #360; }
    h3 { padding-top: 20px; }
    </style>
    <!-- Load player theme -->
    <link rel="stylesheet" href="themes/maccaco/projekktor.style.css" type="text/css" media="screen" />
    <!-- Load jquery -->
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <!-- load projekktor -->
    <script type="text/javascript" src="projekktor-<%= grunt.config('readme').version %>.min.js"></script>
</head>
<body>
    <h1>W00t!! Thanx for downloading Projekktor V<%= grunt.config('readme').version %></h1>
    <p>
    This file is intended to give a quick introduction on how to install and use Projekktor.
    Please have a look at the source in order to check out what&acute;s going on here.
    More detailed information and a documentation can be found online:
    </p>
    <ul>
    <li><a href="http://www.projekktor.com">Homepage</a></li>
    <li><a href="http://www.projekktor.com/doc/">Documentation</a></li>
    <li><a href="https://github.com/frankyghost/projekktor/blob/master/LICENSE">GPL License</a></li>
    <li><a href="http://www.projekktor.com/shop/supporter-license/"><b>Support this projekkt: Consider a donation</b></a></li>
    <li><a href="http://www.projekktor.com/contact/"><b>Need customizations or Support? Get in touch.</b></a></li>
    </ul>
    <p>
    brought to you by <a href="http://www.spinningairwhale.com">spinning airwhale</a> - web|media|interfaces
    </p>
    <h2>Example - One Video, OGG+MP4+WEBM, Theme: Maccaco by <a href="http://www.porkhead.org">porkhead</a></h2>
    <div id="player_a" class="projekktor"></div>
    <script type="text/javascript">
    $(document).ready(function() {
        projekktor('#player_a', {
        poster: 'media/intro.png',
        title: 'this is projekktor',
        playerFlashMP4: 'swf/StrobeMediaPlayback/StrobeMediaPlayback.swf',
        playerFlashMP3: 'swf/StrobeMediaPlayback/StrobeMediaPlayback.swf',
        width: 640,
        height: 385,
        playlist: [
            {
				0: {src: "media/intro.ogv", type: "video/ogg"},
				1: {src: "media/intro.mp4", type: "video/mp4"},
				2: {src: "media/intro.webm", type: "video/webm"}
            }
        ]    
        }, function(player) {} // on ready 
        );
    });
    </script>
    <h3 style="color: red;">Already using Projekktor? Please don&acute;t forget to read the <a href="https://github.com/frankyghost/projekktor/blob/master/CHANGELOG.md">changelog</a>.</h3>
</body>
</html>

运行效果

Projekktor web 视频播放器 运行效果

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 免费的 Web 视频播放器 Projekktor