js播放m3u8文件

最新推荐文章于 2024-04-19 22:03:47 发布

web修理工

最新推荐文章于 2024-04-19 22:03:47 发布

阅读量846

点赞数

分类专栏： h5 文章标签： javascript

原文链接：https://blog.csdn.net/qq_35461287/article/details/110388123

版权

h5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考:https://blog.csdn.net/qq_36410795/article/details/107109514
参考:https://blog.csdn.net/qq_35461287/article/details/110388123


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>正在直播中</title>
    <script src="https://act.mcake.com/fangli/2018/wap/commonjs/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<!--webkit-playsinline="true"  playsinline="true" 设置苹果手机上播放不自动全屏-->

<body>
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay
        webkit-playsinline="true" playsinline="true" style="width: 100%; height: 240px;" type="video/m3u8"
        data-setup='{}'>
        <source id="source" src="http://d2zihajmogu5jn.cloudfront.net/elephantsdream/hls/ed_hd.m3u8"
            type="application/x-mpegURL">
    </video>
    <script>
        var myVideo = videojs('myVideo', {
            autoplay: true,
            preload: 'auto',
            /*	poster:'../material/poster.jpg',*/
            //bigPlayButton : false,
            //textTrackDisplay : false,
            //posterImage: false,
            //errorDisplay : false,
        })
        myVideo.play() // 视频播放
        //myVideo.pause() // 视频暂停
        document.addEventListener("WeixinJSBridgeReady", function () {
            myVideo.play() // 视频播放
        }, false);
    </script>
</body>

</html>