html5视频播放教程实例


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

pc端主要是利用用flash播放,移动端则通过html5方式实现,这篇文章主要介绍了html5视频播放的相关资料,具有一定的参考价值。

我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长翻墙的人,到底如何我也不得而知。

与主题不相关的HTML5方面的东西我就不多说了,对于video标签,获取大家都听说了,这个标签的功能如同现在HTML语言中的img标签

一、html5技术优势

1 关于视频不用插件播放,点击就能看
2 跨平台、好升级、好维护,开发成本相对原生APP低很多
3 对移动的良好支持,支持手势,本地存储和视频续播等,通过H5就可以把自己的网站移动化。
4 更为简洁的代码,更好的交互
5 支持游戏开发

二、html5播放视频

pc端还是用flash播放,但移动端通过html5方式来做。
而html5的video标签只支持mp4、webm、ogg三种格式.目前所有主流浏览器最新版本都支持html5(除了Opera)
H.264已经占领视频市场的80%。如果移动应用视频,建议编译成264格式,有好的高压缩比、高画质。
H.264则是由两个组织联合组建的联合视频组(JVT)共同制定的新数字视频编码标准,它既是ITU-T的H.264,又是ISO/IEC的MPEG-4高级视频编码(Advanced Video Coding,AVC)的第10 部分。因此,不论是MPEG-4 AVC、MPEG-4 Part 10,还是ISO/IEC 14496-10,都是指H.264。

在HTML5的时代里,基本上只要一个<video>标签加一个视频的src链接地址就可以播放视频了,对于开发人员来讲真是“酷毕了”(《神话》中经典台词)。

然而,当现实照进遐想,我们不得不去正视,现在,支持HTML5 video标签的浏览器寥寥无几。我知道chrome2以及Safari是支持的

三、html5代码DEMO


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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

<!doctype html>

<html>

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

    <script src="JavaScript/jquery-1.7.2.min.js"></script>

    <script src="JavaScript/jsPlayer.js"></script>

    <script src="JavaScript/dtooltip-min.js"></script>

    <link href="CSS/play.css?var=1121" rel="stylesheet" type="text/css">

      

<script type="text/javascript">

function browserRedirect() {

var sUserAgent= navigator.userAgent.toLowerCase();

var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";

var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";

var bIsMidp= sUserAgent.match(/midp/i) == "midp";

var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";

var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";

var bIsAndroid= sUserAgent.match(/android/i) == "android";

var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";

var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";

  

  

if(bIsAndroid){

document.getElementById("a").style.display="block";

document.getElementById("b").style.display="none";

document.getElementById("c").style.display="none";

document.getElementById("d").style.display="none";

}

else if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) {

document.getElementById("b").style.display="block";

document.getElementById("d").style.display="none";

document.getElementById("a").style.display="none";

document.getElementById("c").style.display="none";

} else if(bIsIpad) {

document.getElementById("c").style.display="block";

document.getElementById("a").style.display="none";

document.getElementById("b").style.display="none";

document.getElementById("d").style.display="none";

  

}

else {

document.getElementById("d").style.display="block";

document.getElementById("a").style.display="none";

document.getElementById("b").style.display="none";

document.getElementById("c").style.display="none";

  

}

}

window.onload=function(){browserRedirect();}

  

    $(document).ready(

                function(){

                    var ps=new jsPlayer("700","500","myVideo");

                }

        );

</script>

  

      

<head>

<title>测试移动终端</title>

</head>

<body>

<p id="a"><p>这是安卓手机</p></p>

<p id="b"><p>这是苹果手机</p></p>

<p id="c"><p>这是ipad</p></p>

<p id="d"><p>这是电脑</p></p>

<p style="width:700px;margin:auto;">

    <!--播放器代码开始-->

    <p class="playContent">

        <p class="playScreen">

            <video id="myVideo">

                <source src="Movie/th264.mp4" type="video/mp4">

            </video>

        </p>

        <p class="proLines">

            <p id="origin" class="arial">00:00:00</p>

            <p class="line">

                <p class="isPlayLine">

                    <p class="currentCircle">

  

                    </p>

                </p>

            </p>

            <p id="duration" class="arial"></p>

        </p>

        <p class="playBars">

            <p class="prevBar"><img src="Images/prev.jpg" border="0" id="prev"></p>

            <p class="startBar"><img src="Images/stop.jpg" border="0" id="imgStatus"></p>

            <p class="nextBar"><img src="Images/next.jpg" border="0" id="next"></p>

            <p class="voiceContent">

                <p class="voice">

                    <img src="Images/voice.jpg" id="voiceImg" border="0">

                </p>

                <p class="voiceline">

                    <p class="voicekuai"></p>

                </p>

            </p>

        </p>

    </p>

    <!--播放器代码结束-->

</p>

  

</body>

  

</html>

以上就是html5视频播放教程实例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5地理位置定位geolocation-api及haversine地理空间距离算法(图文)

HTML5中关于volume属性的使用详解

分享一个HTML5实现拖放的实例代码

值得一个的5个强大的HTML5api 函数

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

HTML5 web 存储详解

HTML5+nodejs实现websocket即时通讯的示例代码分享

HTML5 虚拟键盘出现挡住输入框怎么办

h5实现文本框提示语的代码实例

解决h5网页中用video标签无法播放mp4视频的方法

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




打赏

取消

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

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

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

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

评论

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