jQuery视频播放插件jsModern(修改版)

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

 31547  306  查看评论 (29)
分享到微信朋友圈
X
jQuery视频播放插件jsModern(修改版) ie兼容9

使用方法

文件里只需要 写引入 jsModern 的样式表和 js,和 jquery的包,

<link rel="stylesheet" href="css/jsmodern.min.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="jq/jsmodern.min.js"></script>

我这个视频是 本地的,你可以更改自己的 视频地址。

<div id="video">
    <video src="images/video.mp4" id="videoShow"></video>
    <span ><img src="images/bo1.png"></span>
</div>

自己 加了一个播放的按钮,视频播放时候就 隐藏。暂停就显示,

//播放视频
$(".VideoBtn").click(function() {
    var video = document.getElementById("videoShow");
    video.play();
    $('.VideoBtn').hide();
})
//监听视频的播放状态
var video = document.getElementById("videoShow");
video.oncanplay = function() {
    $(".VideoBtn").show();
    //$("#video").attr("poster","");
}
//视频播放事件
video.onplay = function() {
    $("#videoShow").attr("poster", "");
    $(".VideoBtn").hide();
};
video.onplaying = function() {
    $(".VideoBtn").hide();
};
//视频暂停事件
video.onpause = function() {
    $(".VideoBtn").show();
};
//点击视频周围暂停播放图片出现
video.onclick = function() {
    if (video.paused) {
        $(".VideoBtn").hide();
        video.play();
    } else {
        $(".VideoBtn").show();
        video.pause();
    }
};
相关插件-音频和视频

video封装ui

videoui无任何依赖,代码注释很清楚。
  音频和视频
 43970  286

完美仿网易网页侧边隐藏音乐播放器

非常好用的网页侧边音乐播放器(在服务器下完美运行)
  音频和视频
 37517  335

一款简单实用的视频播放插件

虽小却精悍,可自动播放,音乐,视频,支持HTML5
  音频和视频
 104493  348

一个交互式的动画SVG(鼓)工具包

有关如何使用GSAP和jQuery创建动画和交互式SVG鼓套件的教程。
  音频和视频
 22850  332

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

    爱酷3478613157 0
    2020/4/24 10:53:13
    可以监听视频全屏退出事件吗 回复
    XJTM 0
    2020/2/28 20:35:08
    我用safari浏览器(windows版只更新到5.1.4)打开,可以点击全屏,但是不可以点击退出。safari不支持退出全屏api吗?还是更高版本支持? 回复
    夜色倾城 0
    2020/2/27 17:32:32
    请问怎么设置自动播放
        raychu11240
        2020/4/23 15:23:09
        解决了么
    回复
    你笑起来真的很迷人 0
    2019/12/31 15:16:44

    jsModern.video("#video"); 为什么源码总是报错

    回复
    让爱去旅行 0
    2019/12/6 10:47:16
    这个能播放rtsp视频流嘛
    回复
    臭小七 0
    2019/9/6 10:55:48
    我的视频格式是wmv格式的,为什么不行呢
        西瓜0
        2019/9/6 11:03:20

        wmv格式是微软的数字媒体格式,只有ie浏览器调用Windows Media Playe才能播放。其它浏览器不支持局限非常大,你需要对wmv格式转换为mp4或ogg或webm这三种之一才可以。

        臭小七0
        2019/9/6 11:39:44
        好的,我试试
    回复
    臭小七 0
    2019/9/6 10:51:07
    为啥按照教程做了,没反应 回复
    843526079 0
    2019/8/15 15:36:23
    大神您好,我这边使用这个播放器之后IE9浏览器点击全屏没反应是什么原因呢?全屏的按钮是暗色的,暂停和声音是白色可正常使用。 回复
    ___牧羊___ 0
    2019/8/11 16:27:29
    一只小欧追 0
    2019/7/1 18:39:14
    能在手机上用吗 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复