使用JWPlayer在网页中嵌入视频

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

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

实际就是在页面中嵌入个控件。社区里已有很多解决方案了。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。

时间: 2024-11-03 21:46:04

使用JWPlayer在网页中嵌入视频的相关文章

使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩溃的. 2. 利用<object>标签嵌入视频 优点:也比较方便,对于swf来说不错. 缺点:如果播放的是wmv格式,利用Chrome打开就搞笑了,有时候会提示你安装media player插件,有时候连个提醒都没有.也就是说跨浏览器的能力不足. 不同的视频格式还有不一样的代码,太繁琐. 3. 利

如何在网页中添加视频?怎样在网页中添加视频

在网页中添加视频的方法今天终于实现了,为了能让那些需要在网页中自由播放自己的视频的朋友收到这个文章,我把标题写的长了点.首先说一下需求,在之前做的一个静态页面中,要加入一个视频,要求自动播放,还要能暂停,有播放进度的功能,但是在百度上很久,一直没有找到这个问题,可能自己太笨了,后来,没有办法,就引用了优酷的连接,但是这样在去掉广告的情况下,还是经常.偶尔会出现广告,这个很让人火大,因为本身自己就是广告,优酷在放30秒,基本人家已经跳出这个网页了,今天终于在别人的网页中看到了一段代码,于是一搜,找

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

由于公司项目的需求,需要在展示一些信息的时候能够播放视频,拿到这个要求,我就从最简单的媒体播放标签<embed>开始,虽然这个标签确实可以播放事情,但是只能部分浏览器支持,个人感到很郁闷,要是所有浏览器都统一的话,这个问题就很好解决了.后面就追寻插件的解决方案,首先尝试了下media player,用这个插件视频时可以播放,但是只能在ie下播放,还有一切其他插件用起来比较麻烦,在这个就不细说了. 后来想像优酷等视频网站一样用flash来播放视频(这确实是一个比较合理的方案,flash用户超多)

如何用web api在网页中嵌入二维码?

如何用web api在网页中嵌入二维码? 随着智能手机和平板电脑的日益普及,二维码逐渐成了链接智能终端和传统网站的桥梁.在下文中,笔者将介绍几个实时生成二维码的web api,希望能够简化web design过程中的二维码集成工作. 1. 范例一 <img src="http://qrickit.com/api/qr?d=http://www.taobao.com" > 上述代码产生如下的二维码图片: 该web api还支持下面的这些特性, 说明文字:例如addtext=H

博客代码:iframe—网页中嵌入其他网页

iframe 是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用.对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适.而对于在新浪博客里不支持的一些网页效果和代码,可先把他们设置好,在支持他们的网站上使用,或上传到一个免费的网络空间或网络硬盘里,获取相应的网页地址,然后用 iframe嵌入到新浪博客里,非常好用! 一.固定位置的iframe代码: <DIV align=center><IFRAME src="http://weather.265.com

#网页中嵌入PDF文件#

关于在网页中嵌入PDF在ICPF平台项目开发中遇到的问题: 问题1:如何网页中嵌入PDF: 常用到的方法有以下几种: 代码片段1: 1 <object type="application/pdf" data="file:///D:/atm/prtPDF/2016-07-28622262104000373211200009087.pdf" id="review" style="width:800px; height:750px; m

在自己的网页中嵌入百度地图

最近项目需要在网页中嵌入地图,于是在这里记录下网页嵌入百度地图和使用百度地图api自定义地图的步骤,需要的朋友也可以参考下 首先进入http://api.map.baidu.com/lbsapi/creatmap/,搜索自己想要显示的经纬度,即为定义的中心点坐标 其余的在代码中有注释,可以根据自己需要进行更改 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conte

网页中嵌入地图位置方法

想在网页中嵌入自己公司的位置,百度地图就有这个功能 进入百度地图api地图 http://api.map.baidu.com/lbsapi/creatmap/ 设置尺寸.搜索位置 可以进行标注 最后生成代码 演示:http://www.hebei8.top/html/lianxiwomen/

当网站中嵌入视频中,总是弹出迅雷的下载框,或者视频无法播放的情况

最近遇到一个奇葩的问题,在web中嵌入视频要么就是弹出迅雷下载的窗口,要么就是提示:您的视频路径不对或者不支持您的类型,这有一种可能就是装了迅雷.具体的解决办法就是,直接把迅雷中的设置关了就行. 如下图,把其中的勾去掉就行. 如果还是不行的话,有可能就是internet设置的问题.只需要在IE浏览器中更改设置就行.具体如下: IE浏览器选项工具-internet属性-程序-管理加载项-已使用的加载项 在这里面把迅雷的插件关闭 如果想要还是这里打开就可以了