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

实际就是在页面中嵌入个控件。社区里已有很多解决方案了。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在网页中嵌入视频的更多相关文章

  1. 使用CKplayer插件在网页中嵌入视频的方法（常用笔记2）

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  2. 【CKplayer】使用CKplayer插件在网页中嵌入视频的方法

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  3. 用flvplayer.swf在网页中播放视频(网页中flash视频播放的实现)

    原:http://blog.csdn.net/ricciozhang/article/details/46868201 由于公司项目的需求,需要在展示一些信息的时候能够播放视频,拿到这个要求,我就从最 ...

  4. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  5. IE8下网页中的视频会遮挡住顶层DIV的解决办法

    在IE8浏览器下,发现网页中的视频会遮挡住本来固定在最顶层的DIV.即便使用z-index也无法解决.但是其他浏览器是正常的. 解决的办法很简单,就是在调用flash视频播放器的时候,加上一个参数“o ...

  6. 网页中嵌入百度地图报错：The request has been blocked,the content must served over Https

    网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...

  7. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  8. 用firefox的插件下载网页中的视频

    对于网页中的一些视频,直接下载不了,可以用专用下载软件下载,也可以用firefox的NetVideohunter Video Downloader插件下载网页中的视频,方便快捷. 工具/原料   fi ...

  9. h5中嵌入视频自动播放的问题

    在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...

随机推荐

  1. SQL Server 2008 R2[ALTER]列属性修改

    1:向表中添加字段 Alter table [表名] add [列名] 类型 2:  删除字段 Alter table [表名]  drop column [列名] 3:  修改表中字段类型 (可以修 ...

  2. C#中value是什么意思

    value是c#中的“属性”例如c#某个类中有一个成员变量(字段),为了安全性,外部如果要访问它,必须通过“属性”来访问:private int _id;//这是一个成员变量,private表示是私有 ...

  3. http://blog.sina.com.cn/s/blog_6940cab30101hn9j.html

    http://blog.sina.com.cn/s/blog_6940cab30101hn9j.html

  4. html5添加音乐包括暂停

    <audio id="musicfx" loop="loop" autoplay="autoplay"> <source ...

  5. HTML5列表、块和布局

    一.列表 <ul> <ol> <li> unorder order list ol: type="1 A a I i" start=" ...

  6. 神奇的计算器dc和bc

    神奇的计算器dc和bc Linux就这个范儿 P244http://baike.baidu.com/link?url=YlTtivBfc1tfzreeUQoe8D0C6yqwbZGqnmlObq1hj ...

  7. you need to upgrade the working copy first

    is too old (format 29) to work with client version '1.9.4 (r1740329)' (expects format 31) 2016年09月18 ...

  8. 在网页中弹出qq临时会话

    http://www.54kefu.net/linshi/201202/391.html

  9. mac电脑忘记账户名密码解决方法

    1,重启电脑 ,开机按command+R 2,等苹果开机完成后会进入单用户模式.然后从单用户模式进入终端. 3,在终端里面输入resetpassword. 4,选择系统(root)账户重新输入密码,存 ...

  10. iOS调用HTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...