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

代码


<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>demo</title>  
    <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>1</h1>
            <!-- autoplay + muted 自动播放生效 -->
            <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">
                <!-- <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">   -->
                <!-- <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>2</h1>
            <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>3</h1>
            <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>4</h1>
            <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>5</h1>
            <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>6</h1>
            <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>7</h1>
            <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>8</h1>
            <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>9</h1>
            <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>10</h1>
            <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>

效果图

在这里插入图片描述

Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

仓颉迁移实战：将 Node.js 微服务移植到 Cangjie 的工程化评测

avatar EazyDevelop社区

探秘深海：一款强大的深度学习框架——DeepSea

在人工智能领域中，深度学习是推动科技进步的一股强大动力。今天，我们要向大家推荐的是一个专为深度学习爱好者和开发者打造的强大框架——DeepSea。该项目由Team-Neptune团队开发，并托管在Gitcode平台上，旨在简化和加速深度学习模型的研发过程。## 技术分析### 灵活的架构设计DeepSea采用模块化的设计，允许用户根据需求选择不同的组件，如优化器、损失函数等，以构建定制

avatar EazyDevelop社区

taosync：适用于AList v3的自动化同步工具

在现代生活中，数据同步和备份已成为维护数据安全的关键环节。taosync是一款专为AList v3设计的自动化同步工具，能够帮助用户轻松地同步和备份他们的数据到多个网盘或FTP存储服务。这款工具的开发初衷是为了保存孩子的成长照片，其名称“taoSync”也因此而来。taosync以开源免费的形式提供，支持几乎所有的常用平台，并且提供了完善的日志记录、任务管理以及安全的密码加密功能。## 项目技

avatar EazyDevelop社区