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

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

 84265  429  查看评论 (28)
分享到微信朋友圈
X
基于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(); //移除播放器,且销毁实例,销毁后可重新进行实例化播放器


相关插件-音频和视频

jQuery仿微信公众号语音框插件weixinAudio.js

jQuery仿微信公众号的语音播放功能weixinAudio.js
  音频和视频
 42154  391

jQuery小果音乐播放器(原创)

小果音乐播放器,界面简约清新,功能实用
  音频和视频
 15892  176

音乐泡泡排序(CPC泡泡排序)

泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 18596  242

1:1模仿虾米音乐播放器,歌词与播放进度同步

能够很好地对歌词进行同步,1:1模仿虾米音乐播放器,希望有兴趣的朋友能够相互支持。
  音频和视频
 47697  472

讨论这个项目(28)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    just feeling 0
    2019/8/23 17:40:19
    自动播放有问题
    回复
    景舟科技-技术-金波 0
    2018/7/13 16:40:03
    执着、 0
    2017/11/13 15:43:07

    Uncaught DOMException: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).怎么修改啊

        Obsession0
        2018/12/6 9:10:23
        这个报错解决了么
    回复
    NULL司机 0
    2017/9/28 12:01:45

    连ie都不能播放 这种发上来做什么

    回复
    QQ 0
    2017/7/9 12:03:50

    为什么播放本地视频有音频没视频呢?

    回复
    打南边来了个喇嘛 0
    2017/6/28 11:30:36

    大哥。。mp4文件播放一半就自己停下了。。后边的文件就播放不了了。。怎么回事。。。报错找不到文件

    回复
    ???骅葫淌??? 0
    2017/6/13 22:09:13

    全屏不是横屏啊

    回复
    兮兮_yu 0
    2017/5/13 11:17:35

    Uncaught DOMException: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).

        at HTMLVideoElement.fzPools.VIDEO_DOM.ontimeupdate

    出现这个错误,怎么修改呢

        执着、0
        2017/11/13 15:40:44

        你解决了没有呢

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

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

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

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

        ??BOBO0
        2017/12/20 11:33:47
        你解决了吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复