videojs 播放 hls 流视频 自动播放(autoplay + muted)

1.它没有 之前 rtmp转流视频不能隐藏标签 和离开页面 会报错 这个不会
2.自动播放 无效解决 autoplay+autoplay

代码


  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>demotitle>  
    <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.0.3/video.js">script>
    <style>
        .uls{
      
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: center
        }
        .lis{
      
            list-style-type: none;
        }
    style>
head>
 
<body>
   <ul class="uls">
       <li class="lis">
            <h1>1h1>
            
            <video id="myVideo1" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://yf.ugc.v.cztv.com/cztv/ugcvod/2018/04/14/A98CD7B26B06D94A5CEA56AA7D723572/h264_800k_mp4.mp4_playlist.m3u8"  type="application/x-mpegURL">
                
                
            video> 
       li>
       <li class="lis">
            <h1>2h1>
            <video id="myVideo2" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay  preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    
            video>  
       li>
       <li class="lis">
            <h1>3h1>
            <video id="myVideo3" class="video-js vjs-default-skin vjs-big-play-centered"  controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />   
            video> 
       li>
       <li class="lis">
            <h1>4h1>
            <video id="myVideo4" class="video-js vjs-default-skin vjs-big-play-centered"  controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />  
            video> 
       li>
       <li class="lis">
            <h1>5h1>
            <video id="myVideo5" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    
            video> 
       li>
       <li class="lis">
            <h1>6h1>
            <video id="myVideo6" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    
            video>
       li>
       <li class="lis">
            <h1>7h1>
            <video id="myVideo7" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    
            video>
       li>
       <li class="lis">
            <h1>8h1>
            <video id="myVideo8" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    
            video>
       li>
       <li class="lis">
            <h1>9h1>
            <video id="myVideo9" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    
            video>
       li>
       <li class="lis">
            <h1>10h1>
            <button class="del" onclick="del(10)">销毁button>
            <video id="myVideo10" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      
                <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    
            video>
       li>
   ul>
body>  
html>

效果图

videojs 播放 hls 流视频 自动播放(autoplay + muted)_第1张图片

你可能感兴趣的:(JavaScript,HTML/HTML5)