zoukankan      html  css  js  c++  java
  • 网页如何播放视频

    网页当中播放视频有3种实现方式:

    1.使用html5的<video>...</video>标签,就像<img>标签那么用。如果只是简单的播放,这是推荐的方式。

    <video id="video" src="video/ABP-483.avi" width="480" height="320" controls loop>  
        don't support html5  
    </video> 

    在src属性指定视频文件的本地路径或网络路径,例如http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4,即可,经测试,chrome,firefox,ie10都能正常播放

    优点是简单,缺点是有些老的浏览器不支持html5

    2.使用flash来播放,是指使用<object>...</object>标签

    <object id="flowplayer" width="704" height="400" data="media/flowplayer-3.2.16.swf" type="application/x-shockwave-flash">
        <param name="movie" value="media/flowplayer-3.2.16.swf" /> 
        <param name="flashvars" value='config={"clip":"media/beach.mp4"}' />
    </object>

    标签中的属性data="media/flowplayer-3.2.16.swf",和<param name="movie" value="media/flowplayer-3.2.16.swf" />这里都使用了一个.swf的文件,该文件是自己定义的播放器插件,需要第三方如flowplayer的插件(如何安装使用flowplayer,可参考http://flash.flowplayer.org/documentation/installation/),或者自己写代码做一个播放器。还需要一个名为flashvar的param标签,来指定视频文件的url。

    优点是,几乎所有浏览器都能播放,只要安装了flash插件,缺点是,需要自主开发或者使用播放器插件,配置相对复杂

    3.使用客户端的自带视频播放器,是指使用<embed></embed>,这种是把视频完整地下载到客户端本地再调用自身的播放器播放。缺点很明显:网站不能与客户端通信,不能与之交互。

    参考:

    1、HTML5视频的那些事儿

    2、html5网页中用video标签

  • 相关阅读:
    09.Restful规范
    微信小程序 滚动插件 hSwiper2.0
    前端开发中代码仓库的团队使用(Github)
    hDProcess.js文档浏览进度插件
    Javascrtipt 基本排序算法
    NodeWebkit配置文件简介
    JavaScript中call,apply,bind方法的总结
    Javascript 闭包理解
    javascript常用知识点
    微信小程序 滚动插件 hSwiper
  • 原文地址:https://www.cnblogs.com/aaronhoo/p/7049214.html
Copyright © 2011-2022 走看看