HTML5视频播放的详细介绍


本文摘自PHP中文网,作者零下一度,侵删。

最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃。最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦。

最近迷上hi这个单词,所以我给这个播放器取名叫做:hivideo。

hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo,全屏播放时还支持横屏播放。

jPlayer : 基于HTML5/Flash的音频、视频播放器

jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件);

jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页.

jPlayer的丰富API可以让你创建一个个性化多媒体应用,因此也获得越来越多的社区成员的支持和鼓励。

官网:www.jplayer.cn

英文:www.jplayer.org

1.准备

jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf (官网下载)

还有一个音频文件

2.代码

复制代码

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>清冽叮咚短信音</title>

</head>

<body>

<div id="play-box">

    <div id="jquery_jplayer_1" class="jp-jplayer"></div>

    <div id="jp_container_1" class="jp-audio">

        <div class="jp-type-single">

            <div class="jp-gui jp-interface">

                <ul class="jp-controls">

                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>

                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>

                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>

                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>

                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>

                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>

                </ul>

                <div class="jp-progress">

                    <div class="jp-seek-bar">

                        <div class="jp-play-bar"></div>

                    </div>

                </div>

                <div class="jp-volume-bar">

                    <div class="jp-volume-bar-value"></div>

                </div>

            </div>

        </div>

    </div>

</div>

<script src="jquery.min.js?1.1.11" type="text/javascript"></script>

<script src="jquery.jplayer.min.js?1.1.11" type="text/javascript"></script>

<script type="text/javascript">   

    function toplay(){

        var playerc = $("#jquery_jplayer_1");

        if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) {

            playerc.jPlayer("setMedia", {

                m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用网络资源,自行设定音频文件

            }).jPlayer("play");//jPlayer("play") 用来自动播放

        }else {

            playerc.jPlayer({

                ready: function() {

                    $(this).jPlayer("setMedia", {

                        m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上

                    }).jPlayer("play");//同上

                },

                swfPath: "include/javascript",

                supplied: "m4a"  //acc属于M4A

            });

        }

    

    setInterval(function(){

         toplay();

    },3000);//3秒循环播放

</script>

</body>

</html>

复制代码

附:HTML5支持的音频文件

文件格式 媒体类型
MP3  audio/mpeg
Ogg  audio/ogg
Wav  audio/wav

各个浏览器的支持各有有所不同

以上就是HTML5视频播放的详细介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

使用h5实现react拖拽排序组件的方法(附代码)

electron页内查找模块介绍(代码示例)

HTML5制作查询页面实例

有关HTML5页面在iphonex适配问题

html与HTML5有什么区别

HTML5 output标签是什么意思?HTML5 output标签的使用方法

h5的服务器推送事件详解

怎样用h5预览pdf格式的文档

详解HTML5实现微信拍摄上传照片的功能

如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...