可以使用Video.js插件。说明：这款插件不需要在客户的浏览器上安装，而是在本地服务器上安装就行。

使用办法：

https://github.com/videojs/video.js 插件下载地址

第一步:引入Video.js和video.css

这里我们用远程资源

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">

    <script src="https://unpkg.com/video.js/dist/video.js"></script>

由于m3u8视频的播放还需要额外插件videojs-contrib-hls.js才可支持,所以再引入videojs-contrib-hls.js即可

<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

第二步:加入video标签

<video id="my_video_1" class="video-js vjs-default-skin fillWidth" controls width="640" height="268"data-setup='{}'>

  <source src="http://10.57.180.133/coil/_definst_/0/0/0/000000000269_app.smil/playlist.m3u8" type="application/x-mpegURL">

</video>//如果不用videojs手动启用,那黄色部分代码是必须要有的,否则video.js无法找到该作用于哪个对象导致将失效

试过视频是在iframe中,由于iframe的安全机制,必须稍许设置才可正常全屏功能.

第四步:iframe允许全屏

<iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" width='100%' height='98%' scrolling='no' frameborder='0' src='..............'></iframe>

只要包含了视频的iframe全都要加黄色背景代码才可正常全屏.

由于利用了第三方js辅助播放视频,不可避免的video.js会用脚本的方式请求资源在做处理,由于视频资源往往是另一台服务器,所以这里涉及到跨域问题,所以要保证视频资源是允许跨域访问的.

第五步:允许服务器跨域

这里用.net跨域举例:

在<system.webServer>节点下配置如下代码

到这里即可配置完成，无需客户安装插件

使用教程转载于：http://www.cnblogs.com/xiaoliangge/p/7248972.html