<meta charset="utf-8">
<script src="./static/js/hls.js"></script>


<link href="./static/css/video-js.css" rel="stylesheet">
<script src='./static/js/video.js'></script>
<!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
<script src="./static/js/videojs-contrib-hls.min.js"></script>


<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">hls.js
    带缩略图播放m3u8(iphon播放不放大，但是不能自动播放（只有mac微信能自动播放），所有设备都能播)</div>

<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">

    <video poster="./static/video/poster.png" id="video" ref="video" width="400px" height="auto" controls="controls"
        autoplay="autoplay" x-webkit-airplay="true" x5-video-player-fullscreen="true" preload="auto" playsinline="true"
        webkit-playsinline x5-video-player-typ="h5">
        <source type="application/x-mpegURL"
            src="http://bj6sy-vodcdn.migucloud.com/mgc_transfiles/200013152/2023/8/30/0BSkUqfeJ2TWBkmRE7SKna/7678ba14/custom_cld450p/0BSkUqfeJ2TWBkmRE7SKna-1693390304091_custom_template_20230830181150.m3u8">
    </video>
</div>


<script>
    console.log('是否支持HLS', Hls.isSupported())
    console.log('浏览器信息, window.navigator.userAgent: ', window.navigator.userAgent);
    var video = document.getElementById('video');
    hls = new Hls()
    hls.loadSource("http://bj6sy-vodcdn.migucloud.com/mgc_transfiles/200013152/2023/8/30/0BSkUqfeJ2TWBkmRE7SKna/7678ba14/custom_cld450p/0BSkUqfeJ2TWBkmRE7SKna-1693390304091_custom_template_20230830181150.m3u8")
    hls.attachMedia(video)
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
    })

    hls.on(Hls.Events.ERROR, (event, data) => {
        console.log(event, data);
        // 监听出错事件
    })

</script>
<hr />




<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">video.js
    带缩略图播放m3u8(iphone播放自动放大，但是不能自动播放（只有mac微信能自动播放），所有设备都能播)</div>

<style>
    .video-js .vjs-tech {
        position: relative !important;
    }
</style>
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">

    <video id="myVideo" width="400px" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
        data-setup='{}' style='height: auto' poster="./static/video/poster.png">
        <source id="source"
            src="http://bj6sy-vodcdn.migucloud.com/mgc_transfiles/200013152/2023/8/30/0BSkUqfeJ2TWBkmRE7SKna/7678ba14/custom_cld450p/0BSkUqfeJ2TWBkmRE7SKna-1693390304091_custom_template_20230830181150.m3u8"
            type="application/x-mpegURL">
        </source>
    </video>
</div>
<script>
    // videojs 简单使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()// 视频播放
    myVideo.pause() // 视频暂停
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
            myVideo.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        } else {
            myVideo.src(vdoSrc)
        }
        myVideo.load();
        myVideo.play();

    }
</script>




<hr />




<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">
    原生的video标签播放m3u8
    （win平台浏览器都不支持播放，win平台的微信内置浏览器也不支持，mac平台的自带浏览器能播放（不自动），mac平台微信内置浏览器不能播放，安卓和iphone的微信内置都可以播放（不自动）。）
</div>
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">

    <video autoplay width="400px" style='height: auto' poster="./static/video/poster.png" controls
        src="http://bj6sy-vodcdn.migucloud.com/mgc_transfiles/200013152/2023/8/30/0BSkUqfeJ2TWBkmRE7SKna/7678ba14/custom_cld450p/0BSkUqfeJ2TWBkmRE7SKna-1693390304091_custom_template_20230830181150.m3u8">

    </video>
</div>



<hr />




<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">
    img标签src写mp4，看苹果设备问题（苹果设备mac和iphone能播放（自动播放），但是没有声音，其他设备不能播放）</div>

<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">
    <img
        src="http://kaceduoxuanyi.oss-cn-beijing.aliyuncs.com/zly1905061347424742051/UpFiles/good/202308301801258921.mp4">
</div>