<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>