zoukankan      html  css  js  c++  java
  • 视频播放插件JWPlayer的使用

    简介

      JW Media Player是一个开源的在网页上使用的Flash视频、音频以及图片播放器,
    支持 Sliverlight 播放,支持H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、
    3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )视频格式,MP3
    ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音频,
    同时也支持swf和图片( gif 、jpg、png)和YouTube格式视频。
    官网地址:https://www.jwplayer.com/learn-more/
    输入邮箱即可下载, 核心文件 jwplayer.js和player.swf。

    使用

    引入JS

    <script src="js/plugins/jwplayer/jwplayer.js"></script>

    使用

    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    /* html*/
    <div id="container"></div>
    <input type="button" class="player-play" value="播放" />
    <input type="button" class="player-stop" value="停止" />
    <input type="button" class="player-status" value="取得状态" />
    <input type="button" class="player-current" value="当前播放秒数" />
    <input type="button" class="player-goto" value="转到第30秒播放" />
    <input type="button" class="player-length" value="视频时长(秒)" />

    /* js*/
    <script type="text/javascript">
    var thePlayer;
    $(function() {
    thePlayer = jwplayer('container').setup({
    flashplayer: 'js/plugins/jwplayer/player.swf',
    file: 'js/plugins/jwplayer/video.mp4',
    aspectratio: "16:9",大专栏  视频播放插件JWPlayer的使用an>
    type:"mp4",//播放文件类型(可选)
    title: "点击播放",//标题(可选)
    "85%",
    height: "80%",
    dock: false
    });

    //播放 暂停
    $('.player-play').click(function() {
    if (thePlayer.getState() != 'PLAYING') {
    thePlayer.play(true);
    this.value = '暂停';
    } else {
    thePlayer.play(false);
    this.value = '播放';
    }
    });

    //停止
    $('.player-stop').click(function() { thePlayer.stop(); });

    //获取状态
    $('.player-status').click(function() {
    var state = thePlayer.getState();
    var msg;
    switch (state) {
    case 'BUFFERING':
    msg = '加载中';
    break;
    case 'PLAYING':
    msg = '正在播放';
    break;
    case 'PAUSED':
    msg = '暂停';
    break;
    case 'IDLE':
    msg = '停止';
    break;
    }
    alert(msg);
    });

    //获取播放进度
    $('.player-current').click(function() { alert(thePlayer.getPosition()); });

    //跳转到指定位置播放
    $('.player-goto').click(function() {
    if (thePlayer.getState() != 'PLAYING') { //若当前未播放,先启动播放器
    thePlayer.play();
    }
    thePlayer.seek(30); //从指定位置开始播放(单位:秒)
    });

    //获取视频长度
    $('.player-length').click(function() { alert(thePlayer.getDuration()); });
    });
    </script>
  • 相关阅读:
    Webstorm 9.0.3 注册码
    css去掉iPhone、iPad的默认按钮样式只需要一行样式就可以搞定
    手机下拉加载
    webpack vuejs项目学习心得
    nodejs常用模块之url
    jquery ajax详解
    iOS 10 (X8)上CoreData的使用(包含创建工程时未添加CoreData)
    使用StoryBoard设置Scrollview的横向滚动不用一行代码
    iOS 创建上线证书
    CoreData多表操作.
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12041361.html
Copyright © 2011-2022 走看看