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

实际就是在页面中嵌入个控件。社区里已有很多解决方案了。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. I2C实时时钟rx-8025板卡实际应用

    rx-8025是片外I2C实时时钟,其应用于9260板卡方法如下.总体思想是配置内核添加驱动(I2C驱动,内核已提供的很完备),板级文件添加设备,添加设备文件以应用程序操作. 1. 配置内核 1)I2 ...

  2. TNS-01201: Listener cannot find executablen

    有哥们说,他的数据库监听无法启动,报如下错误: 让其查看一下环境变量是否设置,说设置没问题,但是还是报同样的错误.只好让其截图了: 1.监听文件 2.profile文件 从上面的截图中,可以看出,pr ...

  3. Java基础之创建窗口——使窗口在屏幕居中(TryWindow2/TryWindow3)

    控制台程序. 1.使用ToolKit对象在屏幕的中心显示窗口,将窗口的宽度和高度设置为屏幕的一半: import javax.swing.JFrame; import javax.swing.Swin ...

  4. Mybatis-Plugin插件学习使用方法

    以下教程仅供学习使用,针对于IntelliJ Idea 15中的Mybatis Plugin插件. 作者博客中的教程:http://myoss.github.io/2016/MyBatis-Plugi ...

  5. 隐藏ipad/ip顶部状态栏

    在GameViewController.swift中重载prefersStatusBarHidden方法,返回true override func prefersStatusBarHidden() - ...

  6. Lintcode: Nth to Last Node in List

    Find the nth to last element of a singly linked list. The minimum number of nodes in list is n. Exam ...

  7. Java基础(57):Eclipse中环境配置(视图字体颜色行号调试快捷键等等)

    1:Eclipse的基本配置 A:程序的编译和运行的环境配置(一般不改) window -- Preferences -- Java 编译环境:Compiler 默认选中的就是最高版本. 运行环境:I ...

  8. Java基础(33):StringBuilder的方法与应用实例(String相关类)

    Java 中的 StringBuilder 类的常用方法 重要的事情说三遍: 在需要频繁对字符串进行修改操作时使用 StringBuilder 的效率比 String 要高 在需要频繁对字符串进行修改 ...

  9. Android深入浅出之Binder机制

    一说明 Android系统最常见也是初学者最难搞明白的就是Binder了,很多很多的Service就是通过Binder机制来和客户端通讯交互的.所以搞明白Binder的话,在很大程度上就能理解程序运行 ...

  10. android课程表的实现

    //图片下方的码段主要实现了课程表所要显示的基本布局,采用ondraw的方法. //别的内容可以根据自己兴趣添加,下面是本人做的,仅供参考.                  package com. ...