基于html5的视频播放器不依赖任何插件

所属分类:媒体-音频和视频

 17251  68  查看评论 (16)
基于html5的视频播放器不依赖任何插件 ie兼容10

使用方法

在head标签内引入fz-video.css与iconfont.css

<link rel="stylesheet" href="./fz-video.css">
<link rel="stylesheet" href="./font/iconfont.css">

在body底部引入fz-video.js

<script src="./fz-video.js"></script>

随后实例化播放器即可

<script>
    var FZ_VIDEO = new createVideo(
        "testBox",  //容器的id
     {
          url: 'http://171.15.197.89/xdispatch/o8t28neoq.bkt.clouddn.com/test.mp4',  //视频地址
         autoplay:true          //是否自动播放
      }
    );
</script>

参数说明

  • createVideo的第一个参数为播放器容器的id,播放器宽高等同于容器的宽高

  • url: 视频的地址

  • autoplay: 视频准备就绪后,是否自动播放,true为自动播放,否则false

方法说明

 var FZ_VIDEO = new createVideo(参数); //实例化并创建播放器
 FZ_VIDEO.setUrl("URL");//切换视频,传入视频地址进行切换
 FZ_VIDEO.overVideo(); //移除播放器,且销毁实例,销毁后可重新进行实例化播放器


相关插件-音频和视频

音频播放歌词同步插件APlayer.js

歌词同步MP3播放器代码
  音频和视频
 8723  46

jQuery HTML5音频视频库-jPlayer

jPlayer是完全自由和开放源码(MIT)用JavaScript编写的媒体库。一个jQuery的插件,(而现在的Zepto插件,) jPlayer可以让你快速编织跨平台的音频和视频到您的网页。jPlayer的全面的API允许你创建创新媒体解决方案。
  音频和视频
 18534  49

jQuery酷黑音乐播放器

jQuery酷黑音乐播放器,含播放列表,播放按钮,音量控制等
  音频和视频
 4482  21

jQuery实现Winamp2播放器插件

win95时代的经典音频播放器,现在我们来通过网页来实现这款播放器。怀旧一下过去的时光。
  音频和视频
 5506  4

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币

    Nopea 0
    2017/2/16 8:44:46

    请问能用<video></video>标签进行引用么?谢谢

    回复
    博伟 0
    2017/2/8 10:45:20

    一页中轮播多个视频怎么办

    回复
    河北小王爷88 0
    2016/11/29 13:11:59
    这个一个页面中有多个视频怎么弄呢?各种id全部复制一遍? 回复
    空城、旧梦╇ 0
    2016/10/29 13:10:01
    我想一个页面放多个视频怎么弄 回复
    丶??? 0
    2016/10/16 18:10:39
    怎么设置能不自动全屏播放 回复
    唐糖糖 0
    2016/8/25 10:08:03
    FZ_VIDEO.setUrl("URL");这个方法怎么用不起勒 一直播放第一次播放的那个视频 楼主 求解答 回复
    相濡以沫&馨 0
    2016/8/24 9:08:16
    博主,能兼容ios  安卓吗  回复
    Crazy_Man 0
    2016/7/19 10:07:02
    博主希望能加入全屏功能,造轮子我还不会呢 回复
    浮生。 0
    2016/7/12 14:07:58
    视频地址那怎么弄?怎么我的视频弄上去不行?
        西瓜0
        2016/7/12 21:07:56
        不是有注释吗。url:“....” //视频地址 注意视频格式,mp4,webm,ogv支持这三种。
        ...0
        2016/12/12 17:12:08
        本地的可以吗?
        小小汤和粉0
        2017/2/14 16:36:09

        可以的

    回复
    明月半倚深秋 0
    2016/7/8 8:07:39
    支持什么格式。 回复
取消回复