码迷,mamicode.com
首页 > Web开发 > 详细

使用JWPlayer在网页中嵌入视频

时间:2015-08-20 21:04:59      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

首发:个人博客,持续更新和纠错

我一直以为在网页中嵌入视频是件复杂的事,一研究才知道原来非常简单。

实际就是在页面中嵌入个控件。社区里已有很多解决方案了。jwplayer是最受欢迎的(之一)。
控件包括js、css和swf文件,swf文件就是播放器,它是控件的一部分,引入控件包跟引入其他的前端控件包方法一样,拷贝到项目路径下即可。
视频是个flv文件,flv文件就放哪里都行了。个人建议像图片一样放个单独的服务器。

示例程序在这里,代码已经传到了github上。
jwplayer本身的文档在这里,藏得非常深,个人非常不喜欢这个官网,花里胡哨,张牙舞爪。
官方文档我还是喜欢朴素简洁的那种。

网页代码及其简单,仅此而已:

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>use jw</title>

    <script src="jwplayer/jwplayer.js"></script>
    <!-- 并不是每个用户独有的身份码,官网给的唯一的,不用改 -->
    <script>jwplayer.key="bAoNHra71KE/mHvb0sirT4HeWLTAkpiYa1mVsA==";</script>
</head>
<body>
    <div id="myElement">Loading the player...</div>
    <script type="text/javascript">
    var playerInstance = jwplayer("myElement");
    playerInstance.setup({
        file: "http://img.zidafone.com/test.flv",
        image: "http://img.zidafone.com/test.jpg",
        width: 640,
        height: 360,
        title: ‘Beautiful Woman‘,
        description: ‘This is the most beautiful woman in the world, do you agree?‘
    });
    </script>
</body>
</html>

长期欢迎项目合作机会介绍,项目收入10%用于酬谢介绍人。新浪微博:@冷镜,QQ:908789432。


使用JWPlayer在网页中嵌入视频

标签:

原文地址:http://my.oschina.net/u/866216/blog/495243

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!