jQuery及video标签视频播放弹窗插件支持mp4,mov等格式详解(图文)

发布时间:2020-05-09 21:33:00 浏览量:0 来源:谷歌测速网

在做html5做播放视频时,如果是mp4,ogg,webm等视频格式,用h5自带的video标签就可以实现,但苹果的mov格式视频video标签是不支持的。


h5实现mp4视频播放:video标签仅支持Ogg、MPEG4, WebM格式,不支持mov格式。

<video id="video" src="xxxx.mp4" controls= "true" preload="none" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill">
</video>

video标签属性:

image.png

video标签扩展使用方法:

(1)使用多种视频格式 
<video>和<audio>元素有个内置的格式后备系统。我们不使用src属性,而是在其内部嵌套一组<source>元素,浏览器会选择播放第一个它所支持的文件。 
我们可以添加WebM格式的视频提供对Opera的支持。

<video controls>
    <source src="hangge.mp4"type="video/mp4">
    <source src="hangge.webm"type="video/webm">
</video>

(2)添加Flash后备措施(推荐) 
上面那个方法不推荐,应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的,同时Flash还能兼容IE8这种连<video>元素都不支持的老浏览器。

这里使用Flowplayer Flash作为备用播放器(本地下载 :flowplayer-3.2.18.zip)

<video controls>
    <source src="hangge.mp4"type="video/mp4">
    <source src="hangge.webm"type="video/webm">
 
    <object id="flowplayer" width="400" height="300"
        data="flowplayer-3.2.18.swf"
        type="application/x-shockwave-flash">
        <param name="movie"value="flowplayer-3.2.18.swf">
        <param name="flashvars"value='config={"clip":"hangge.mp4"}'>
    </object>
</video>

(3)也有人优先使用Flash,而HTML5作为后备措施。 
这么做是因为Flash普及率比较高,而HTML5作为后备可以扩展iPad和iPhone用户

<object id="flowplayer" width="400" height="300"
    data="flowplayer-3.2.18.swf"
    type="application/x-shockwave-flash">
    <paramname="movie"value="flowplayer-3.2.18.swf">
    <paramname="flashvars"value='config={"clip":"hangge.mp4"}'>
 
    <videocontrols>
        <sourcesrc="hangge.mp4"type="video/mp4">
        <sourcesrc="hangge.webm"type="video/webm">
    </video>
</object>


说完了video标签的使用,很方便,但有一个问题就是不video标签不支持苹果mov格式视频,如果页面上视频两者mp4,mov兼容支持,只能使用插件。

前端视频效果图


video标签mov,无法播放,如图:

clipboard.png


使用js插件支持mov格式,

引入jquer和pingzi_video.js,video.css

创建按钮 并给按钮添加class="m-video" 然后就可以用一下两种模式了

<script src="https://www.googlespeed.cn//static/js/video/pingzi_video.js"></script>
<link rel="stylesheet" href="https://www.googlespeed.cn//static/js/video/video.css">


创建按钮 并给按钮添加class=“m-video” 然后就可以用一下两种模式了

第一种用法

在元素上添加data-src属性 将视频地址放入其中

<div class="m-video" data-src="demo.mp4">点我播放视频</div>


第二种用法

在元素上添加data-src属性 放入视频地址,data-menu属性放入文件名 不加 扩展名

<div class="m-video" data-src="shipin/" data-menu="480 720 1080">video </div>


image.png