首页 > 代码库 > 如何在网页中添加视频？怎样在网页中添加视频

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

2024-07-02 07:29:15   226人阅读

在网页中添加视频的方法今天终于实现了，为了能让那些需要在网页中自由播放自己的视频的朋友收到这个文章，我把标题写的长了点。首先说一下需求，在之前做的一个静态页面中，要加入一个视频，要求自动播放，还要能暂停，有播放进度的功能，但是在百度上很久，一直没有找到这个问题，可能自己太笨了，后来，没有办法，就引用了优酷的连接，但是这样在去掉广告的情况下，还是经常、偶尔会出现广告，这个很让人火大，因为本身自己就是广告，优酷在放30秒，基本人家已经跳出这个网页了，今天终于在别人的网页中看到了一段代码，于是一搜，找到了这个东西jw player，一款网页播放器，支持免费和付费，支持大多视频格式，因为是英文的文档，没有仔细去研究，就发一下个人简单的用法，基本上已经满足80%的用户。以下是我的操作方法：

1，http://www.jwplayer.com/sign-up/　　　　官方下载地址，输入你的邮箱，获取登陆密码，进行下载，获得一个压缩包

我已经下载过了，如果大家懒得去下载，大家可以通过这个连接下载：files.cnblogs.com/geek12/jwplayer-6.8.zip

2，官方有英文的文档，这个是连接大家可以自己去了解： http://support.jwplayer.com/ 如果有中文的，要告诉我哦

那个压缩包里面，有这么几个文件，下面是截图：

第一个swf结尾的，应该是播放器，第二个应该是html5播放器，第三个是兼容大多浏览器，最后一个是简单的例子使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页嵌入视频</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"" />
    <style type="text/css"></style>
    <!--下面是引入重要部分-->
    <script type="text/javascript" src=http://www.mamicode.com/"./jwplayer/jwplayer.js"></script>
</head>
<body>
<div id="myElement"></div>
 
<script type="text/javascript">
    jwplayer("myElement").setup({
    flashplayer:"/jwplayer/jwplayer.flash.swf", // 引入播放器
        file: "/shipin.flv",    // 引入视频地址
         image: "/pic.jpg", // 视频播放前的显示图片，主要用于美观，你可以试一试
         autostart:true,    //true表示自动播放
         height:360,    // 视频的高
         width:640,     // 视频的宽，jwplayer默认宽和高是640*360，可以自己设置
    });
</script>
</body>
</html>

上面是一个完整的代码，里面都有注释，基本上已经满足大多数人的使用。

在用图片作为视频封面的情况下，图片一直不能占到视频的100%，两边有留黑的解决办法：不要使用封面图片大小和视频大小不一样， 图片必须和你的宽高一样，这样视频封面的图片将会占用100%，很漂亮。

第一次写这个，写了将近一个小时，如果大家觉得不错的，请拿去使用，如果还有什么疑问和不理解的，请留言哦，我每天都会来写一些东西，希望能帮助到那些需要的人。。。

 

 

 


联系
我们