jQuery Video Extend

HTML5視頻擴展插件

• 可以加入Logo

• 加入標記

用法：

下載：jquery-video-extend

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery.video-extend.js"></script>

<script>
$(document).bind('ready',function() {
        $("#video1").videoExtend({
                logo: 'logo.png',
                logoLink: 'http://itmyhome.com',
                logoSize: [45, 20],
                markers: [{
                        time: 13.04,  // seconds
                        text: 'Chapter 1'
                }]
        })
});
<//script>

<video id="video3" width="450" height="260" controls loop autoplay>
    <source src="video/simple.mp4" type="video/mp4">
</video>

還有一種方式：

<video width="450" height="260" data-logo="img/logo.png" data-markers='[{"time":13,"text":"Chapter 1"},{"time":150,"text":"Chapter 2"}]'>
    <source src="video/Sintel.mp4" type="video/mp4">
</video>

演示：pushu.me

PS: MP4其它以外格式是否能播放沒有驗證。

假設MP4視頻不能被播放，可能視頻的編碼格式不是 h264。

利用格式工廠對mp4視頻，用h264視頻編碼格式又一次編碼，獲得的視頻就可以使用了。

做者：itmyhome