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

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

 22440  82  查看评论 (21)
基于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(); //移除播放器,且销毁实例,销毁后可重新进行实例化播放器


相关插件-音频和视频

3D音频分析仪

3D音频分析仪,效果那是相当的震撼。
  音频和视频
 6948  61

DanMuer.jsjs弹幕插件(原创)

本插件是一个弹幕发生器,利用HTML5 canvas + ES6来实现普通弹幕和高级弹幕发送。 也有通过babel转成的ES5版,支持IE10+;版本从3.0.0开始,从重优化了性能,丰富了功能,而且本插件是个开源项目, 本人会不断更新新的功能。相比其他同类型插件来讲,本插件适用范围更广,不光适用于视频、直播,也适用于其他的一些场景。 插件继承了相关模块工具的引用接口,也可以和其他视频播放插件(如video.js等)进行有效结合, 支持高级弹幕和全局弹幕的控制和过滤,在默认配置下,在移动设备上也有良好的性
  音频和视频
 1011  9

html5云特效背景音乐网站模板

html5动态特效背景,带播放器
  音频和视频
 14665  223

jQuery html5自定义视频控件

html5自定义视频控件,加入评论,载入弹幕,鼠标悬浮在进度条显示某时刻画面,视频卡端显示加载动画,清晰度切换等功能;并添加了弹幕隐藏显示设置,播放速度设置,镜像翻转设置。
  音频和视频
 4041  62

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

    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

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

    回复
    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
    怎么设置能不自动全屏播放
        It's me,Dr.0
        2017/4/5 11:08:22

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

    回复
    唐糖糖 0
    2016/8/25 10:08:03
    FZ_VIDEO.setUrl("URL");这个方法怎么用不起勒 一直播放第一次播放的那个视频 楼主 求解答 回复
取消回复