js初始化

一.js 页面加载初始化方法

复制代码
// 1.在body里面写初始化方法.
<body onload='init()'>
</body>

<script type="text/javascript">
    function init(){
         // 初始化内容       
    }
</script>
复制代码
// 2.window.οnlοad=function(){}
<script type="text/javascript">
    window.onload=function(){ 
        // 初始化内容 
    }
</script> 
复制代码
// 3.写初始化方法,页面顺序执行到初始化方法时初始化
<script type="text/javascript">
    function init() { 
        // 初始化内容
    }; 
    init(); 
</script>
复制代码

 

二.jquery 页面加载初始化方法

// 1.$(function(){})
<script type="text/javascript">
    $(function() {// 初始化内容
    });  
</script>
复制代码
// 2.$(document).ready(function(){})
<script type="text/javascript">
    $(document).ready(function(){  
        // 初始化内容
    });  
</script>

// ready()函数有以下三种等价的形式
function handler(){
    //这里是需要执行的代码
}

// 形式一
$(document).ready( handler );
// 形式二
$( ).ready( handler ); // 不推荐该形式
// 形式三
$( handler );
 
复制代码
// 3.jQuery(function($){})
<script type="text/javascript">
    jQuery(function($){  
        // 初始化内容
    });  
</script>

 

三.jquery和js初始化加载页面的区别
jquery:等待页面加载完数据,以及页面部分元素(不包括图片、视频), 
js:是页面全部加载完成才执行初始化加载。

 

<think>我们正在讨论如何在Video.js初始化HTML5属性。根据引用内容,Video.js初始化可以通过在<video>标签上设置`data-setup`属性并传入JSON配置,或者通过JavaScript调用`videojs()`函数来实现。这些配置中可以包含HTML5原生属性(如controls,preload,poster等)以及Video.js特有的选项。以下是如何在Video.js初始化HTML5属性的方法:###一、通过HTML标签属性直接设置在<video>标签中,可以直接使用HTML5原生属性,如`controls`,`preload`,`poster`等。同时,通过`data-setup`属性传入Video.js的配置(JSON格式)。示例:```html<videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"data-setup='{"autoplay":"muted","fluid":true}'><sourcesrc="//vjs.zencdn.net/v/oceans.mp4"type="video/mp4"></video>```在这个例子中:-`controls`:HTML5属性,用于显示控制条。-`preload="auto"`:HTML5属性,建议浏览器预加载视频。-`poster`:HTML5属性,设置视频封面。-`data-setup`:Video.js初始化配置,这里设置了`autoplay`(自动播放,但设为muted表示需静音才能自动播放)和`fluid`(流体宽度,自适应容器)。###二、通过JavaScript初始化如果不想在HTML中写`data-setup`,或者需要动态初始化,可以使用JavaScript。示例:```html<videoid="my-player"class="video-js"><sourcesrc="//vjs.zencdn.net/v/oceans.mp4"type="video/mp4"></video>``````javascript//初始化Video.js播放器varplayer=videojs('my-player',{//HTML5属性controls:true,preload:'auto',poster:'//vjs.zencdn.net/v/oceans.png',//Video.js特有配置autoplay:'muted',fluid:true});```注意:在JavaScript初始化中,HTML5原生属性(如controls,preload,poster)也可以作为配置项传入,Video.js会将这些属性应用到<video>元素上。###三、常用HTML5属性列表以下是一些常用的HTML5属性及其说明,可以在初始化时设置:|属性名|类型|说明||------------|--------|----------------------------------------------------------------------||`controls`|布尔值|是否显示控制条(默认false,但Video.js默认会添加自己的控制条)||`preload`|字符串|预加载行为,可选值:`"auto"`(预加载)、`"metadata"`(仅元数据)、`"none"`(不预加载)||`poster`|字符串|视频封面图片URL||`autoplay`|布尔值/字符串|是否自动播放,现代浏览器通常要求`muted`才能自动播放,因此Video.js支持设置为`"muted"`||`muted`|布尔值|是否静音(默认false)||`loop`|布尔值|是否循环播放(默认false)||`width`|数字/字符串|视频宽度(像素值或百分比)||`height`|数字/字符串|视频高度(像素值或百分比)|###四、批量初始化如果页面上有多个Video.js播放器实例,可以通过循环来初始化(如引用[2]所示):```javascript(function(){varvideos=document.getElementsByTagName('video');for(vari=0;i<videos.length;i++){varvideo=videos[i];if(video.className.indexOf('video-js')>-1){videojs(video.id).ready(function(){//播放器准备就绪后的操作});}}})();```###五、在Vue中使用(引用[4])在Vue中,通常封装成组件使用。初始化时,在组件的`mounted`生命周期中调用`videojs`函数。示例:```vue<template><videoref="videoPlayer"class="video-js"></video></template><script>importvideojsfrom'video.js'import'video.js/dist/video-js.css'exportdefault{props:['options'],mounted(){this.player=videojs(this.$refs.videoPlayer,this.options,functiononPlayerReady(){console.log('Playerready');});},beforeDestroy(){if(this.player){this.player.dispose();}}}</script>```###六、注意事项1.**`data-setup`必须存在**:如果使用HTML初始化,即使没有额外的配置,也要设置`data-setup='{}'`(空对象)[^1]。2.**属性冲突**:如果同时在HTML标签和JavaScript配置中设置了同一个属性,JavaScript配置会覆盖HTML属性。3.**Video.js特有属性**:除了HTML5原生属性,Video.js还支持许多特有属性(如`fluid`、`playbackRates`等),这些只能通过配置设置。[^1]:引用内容提到`data-setup`属性必须有个值`{}`,即使为空对象。[^2]:引用内容展示了如何批量初始化多个Video.js实例。[^3]:引用内容展示了通过JavaScript初始化的示例。[^4]:引用内容介绍了在Vue中使用Video.js的方法。§§相关问题§§1.如何在Video.js中设置视频的宽度和高度?2.Video.js支持哪些预加载模式?如何配置?3.如何在Video.js中实现自动播放且静音?4.在Vue组件中使用Video.js时如何避免内存泄漏?</think>### 在Video.js初始化HTML5属性的配置方法 Video.js初始化时会自动处理HTML5视频属性,同时提供JavaScript配置选项来覆盖或增强这些属性。以下是具体配置方法: #### 一、通过HTML标签属性初始化 直接在`<video>`标签中设置HTML5原生属性,Video.js会自动继承这些属性: ```html <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" width="640" height="360" data-setup='{}'> <!-- 必须包含空对象 --> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> </video> ``` **关键HTML5属性**: - `controls`:显示控制条(默认true) - `preload`:预加载策略("auto"、"metadata"、"none") - `poster`:封面图片URL - `width/height`:播放器尺寸 - `autoplay`:自动播放(需浏览器允许) - `muted`:静音状态 - `loop`:循环播放 #### 二、通过JavaScript配置初始化 使用`videojs()`构造函数覆盖或扩展HTML属性: ```javascript const player = videojs('my-video', { // HTML5属性覆盖 controls: true, // 控制条显示 preload: 'metadata', // 仅加载元数据 poster: 'new-poster.jpg', muted: true, // 静音播放 loop: false, // 禁用循环 // Video.js扩展属性 fluid: true, // 流体布局 playbackRates: [0.5, 1, 1.5, 2], // 播放速度选项 responsive: true // 响应式设计 }); ``` #### 三、混合初始化方式 同时使用HTML属性和JS配置(JS配置优先级更高): ```html <video id="mixed-player" controls preload="auto" data-setup='{"autoplay": true, "muted": true}'> </video> ``` #### 四、批量初始化多个播放器 ```javascript document.querySelectorAll('video.video-js').forEach(video => { videojs(video.id, { controls: video.hasAttribute('controls'), preload: video.getAttribute('preload') || 'auto' }); }); ``` #### 五、Vue中的特殊配置(引用[4]) ```vue <template> <video ref="videoPlayer" class="video-js"></video> </template> <script> import videojs from 'video.js'; export default { mounted() { this.player = videojs(this.$refs.videoPlayer, { html5: { nativeTextTracks: false // 禁用原生字幕 }, techOrder: ['html5'] // 强制使用HTML5播放器 }); }, beforeDestroy() { this.player.dispose(); // 清理资源 } } </script> ``` #### 六、重要注意事项 1. **data-setup属性必须存在**(即使为空对象)[^1]: ```html <!-- 正确 --> <video data-setup='{}'> <!-- 错误 --> <video> ``` 2. **属性优先级顺序**: JavaScript配置 > HTML属性 > 浏览器默认值 3. **iOS特殊处理**: ```javascript if (videojs.browser.IS_IOS) { player.autoplay('muted'); // iOS必须静音才能自动播放 } ``` 4. **完整属性列表**: | 属性 | 类型 | 默认值 | 说明 | |---|---|---|---| | `controls` | Boolean | true | 显示控制条 | | `preload` | String | 'auto' | 预加载策略 | | `autoplay` | Boolean/String | false | 自动播放 | | `muted` | Boolean | false | 静音状态 | | `loop` | Boolean | false | 循环播放 | | `playsinline` | Boolean | false | 内联播放(移动端) | | `poster` | String | '' | 封面图URL | [^1]: 引用内容强调必须包含data-setup属性 [^2]: 引用展示了批量初始化方法 [^3]: 引用包含JS初始化示例 [^4]: 引用提供Vue集成方案
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值