chrome不能播放m3u8的直播源,做网站适配,怎么解决?

  • 回答 (2)
  • 关注 (2)
  • 查看 (12598)

ie可以,手机播放也行,就是chrome不行,查了下说chrome不支持,要装插件,那我们总不可能让用户去装插件吧?

爹说的都是真理爹说的都是真理提问于
不知雨回答于
推荐

可以使用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

签一辈子到哈哈我们一定会比前一秒变得更强,不断学习,不断迭代,提升自己才是王道!回答于

哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈!!!!!!!!!!!!!!!!!!!!!!!!

首先,庆幸的是,你遇到了我!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

以前做网站遇到类似的问题了,折腾了N久,最终发现一个神器!

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

Sewise Player

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

<div style="width: 640px; height: 360px; ">
    <script type="text/javascript" src="../player/sewise.player.min.js?server=live&type=rtmp&streamurl=rtmp://219.232.161.204/livestream/mtzysunq&autostart=true&pid=&shifttime=&buffer=5&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=LiveVideo&skin=liveWhite"></script>
</div>

一段代码,直接搞定,让你一下子变的很膨胀!

扫码关注云+社区

领取腾讯云代金券

,,